JS创建DOM节点-使用document.createElement()创建子节点或同级节点

 2015年09月29日    5127     声明


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


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

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

var childNode = document.createElement('p');
childNode.innerHTML = '<span>这里是提示信息〜〜</span>';


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:

<p class="alerts"><span>这里是提示信息〜〜</span></p>