在一個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()创建子节点或同级节点...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。