js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...

在一个Web页面中，需要弹出一个提示信息显示给用户。基于这个需求，要使用document.createElement()创建一个DOM节点。创建完节点后，还要使用appendChild()或insertBefore()将创建的节点插入到DOM的指定位置。

1. createElement(name)创建元素节点

createElement()是Document对象中的方法，该方法会根据指定的元素名称name，返回一个Element对象。如，创建一个p元素：

var childNode = document.createElement('p');

childNode.innerHTML = '这里是提示信息〜〜';

2. 设置创建元素节点的属性

创建元素后，我们可能需要设置元素属性，如：给元素设置CSS样式、添加点击事件等。设置元素属性可以使用Element对象的setAttribute方法，也可以使用属性名设置。例如，我们为上面创建的元素分别添加CSS和添加一个点击关闭事件：

childNode.setAttribute('class', 'alerts');

childNode.setAttribute('onclick', 'this.style.display = "none"');

也可以像下面这样设置：

childNode.className = 'alerts';

childNode.onclick = function () {

this.style.display = 'none';

}

3. 将元素节点插入到DOM文档的指定位置

元素创建后，需要将元素节点插入到DOM文档的指定位置，添加元素使用Element对象的appendChild()方法或insertBefore()方法。appendChild()方法的作用是向元素添加新的子节点，被添加的子节点将作为其最后一个子节点。insertBefore()方法的作用是在已有的节点之前插入新节点，被添加的节点会做为同级节点。例如，我们上面创建的元素做为子节插入到body的最后面：

document.getElementsByTagName('body')[0].appendChild(childNode);

4. 代码整理

所有JavaScript代码整理如下：

window.onload = function() {

var childNode = document.createElement('p');

childNode.innerHTML = '这里是提示信息〜〜';

//childNode.setAttribute('class', 'alerts');

//childNode.setAttribute('onclick', 'this.style.display = "none"');

childNode.className = 'alerts';

childNode.onclick = function () {

this.style.display = 'none';

}

document.getElementsByTagName('body')[0].appendChild(childNode);

}

以上代码会在页面加载完成后，创建如下HTML：

这里是提示信息〜〜

js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...相关推荐

js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
JS添加多个子节点的方法
JS 利用数组一次创建多个元素 function createLi(createArr) { // 一次创建多个元素let newdata = {}for(let i = 0; i < crea ...
js添加多个子节点_javascript如何创建子节点
学习完HTM年据业会效近轻业务进果近轻业务进果近轻业L+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂 ...
js添加多个子节点_js添加和删除节点，方法调用是通过子节点中的节点来添加的呢。...
html> new document 学号姓名操作 xh001 王小明删除 xh002 刘小芳删除 var table = document.getElementById("t ...
js添加多个子节点_JS原生追加子节点
var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = ...
js添加多个子节点_在js中添加新节点
Insert title here window.onload = function(){ alert(1); //document.createElement(elementTagName); // ...
js添加多个子节点_DOM节点
好好学习,天天向上本章主要内容是:节点的属性.层叠关系(父子.兄弟).创建新节点的方法.节点常用操作方法一.节点属性 nodeType 节点的类型,属性值为数字,表示不同的节点类型,共 12 种, ...
js添加多个子节点_javaScript给元素添加多个class的简单实现
.div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } [1]直接把样式赋值给className var ...
通过 JS 添加样式
1. 通过 JS 添加样式 <script>// 获取box的DOM对象var box = document.getElementById("box");box.sty ...

js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...

js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...相关推荐

最新文章

热门文章