在一個Web頁面中，需要彈出一個提示信息顯示給用戶。基于這個需求，要使用document.createElement()創(chuàng)建一個DOM節(jié)點。創(chuàng)建完節(jié)點后，還要使用appendChild()或insertBefore()將創(chuàng)建的節(jié)點插入到DOM的指定位置。

1. createElement(name)創(chuàng)建元素節(jié)點

createElement()是Document對象中的方法，該方法會根據(jù)指定的元素名稱name，返回一個Element對象。如，創(chuàng)建一個p元素：

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

childNode.innerHTML = '這里是提示信息??';

2. 設(shè)置創(chuàng)建元素節(jié)點的屬性

創(chuàng)建元素后，我們可能需要設(shè)置元素屬性，如：給元素設(shè)置CSS樣式、添加點擊事件等。設(shè)置元素屬性可以使用Element對象的setAttribute方法，也可以使用屬性名設(shè)置。例如，我們?yōu)樯厦鎰?chuàng)建的元素分別添加CSS和添加一個點擊關(guān)閉事件：

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

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

也可以像下面這樣設(shè)置：

childNode.className = 'alerts';

childNode.onclick = function () {

this.style.display = 'none';

}

3. 將元素節(jié)點插入到DOM文檔的指定位置

元素創(chuàng)建后，需要將元素節(jié)點插入到DOM文檔的指定位置，添加元素使用Element對象的appendChild()方法或insertBefore()方法。appendChild()方法的作用是向元素添加新的子節(jié)點，被添加的子節(jié)點將作為其最后一個子節(jié)點。insertBefore()方法的作用是在已有的節(jié)點之前插入新節(jié)點，被添加的節(jié)點會做為同級節(jié)點。例如，我們上面創(chuàng)建的元素做為子節(jié)插入到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);

}

以上代碼會在頁面加載完成后，創(chuàng)建如下HTML：

這里是提示信息??

總結(jié)

以上是生活随笔為你收集整理的js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。