Document 對象提供了可以創建元素節點、屬性節點和文本節點的方法，方便 DOM 更新 HTML 頁面中的元素。

創建元素節點

Document 對象提供了 createElement() 方法創建元素節點，其語法格式如下:

element = document.createElement(tagName);

上述語法格式中，tagName 是參數，表示創建元素的元素名稱。element 是返回值，表示創建的元素。

值得注意的是: createElement() 方法優先將參數轉換為小寫。

下面是使用 createElement() 方法的示例代碼:

var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); div.appendChild(elem);

上述示例代碼通過 createElement() 方法創建了 button 元素，并將其添加到 HTML 頁面中。

完整示例代碼請點擊右邊的鏈接: createElement() 方法完整示例代碼

創建文本節點

Document 對象提供了 createTextNode() 方法創建文本節點，其語法格式如下:

textNode = document.createTextNode(data);

上述語法格式中，data 是參數，包含了放在文本節點中的內容，是一個字符串。textNode 是返回值，表示創建的文本節點。

下面是使用 createTextNode() 方法的示例代碼:

var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); // 創建文本節點 var text = document.createTextNode('New Button'); // 將文本節點添加到新的元素節點 elem.appendChild(text); // 將新的元素節點添加到父級元素節點 div.appendChild(elem);

上述示例代碼先通過 createElement() 方法創建了 button 元素，再通過 createTextNode() 方法創建了一個新的文本節點，并將其添加到新創建的 button 元素中。

完整示例代碼請點擊右邊的鏈接: createTextNode() 方法完整示例代碼

創建屬性節點

Document 對象提供了 createAtrribute() 方法創建屬性節點，其語法格式如下:

attributeNode = document.createAttribute(name);

上述語法格式中，name 是參數，屬性節點的屬性名稱。attributeNode 是返回值，表示創建的屬性節點。

值得注意的是:

創建屬性節點方法只具有屬性名稱，沒有屬性值。想要設置屬性值需要通過 nodeValue 屬性完成。

由于屬性節點不是元素節點的子節點，不能使用添加子節點方式操作屬性節點。想要添加屬性節點需要通過 setAttributeNode() 方法完成。

下面是使用 createAtrribute() 方法的示例代碼:

var div = document.getElementById('group'); // 創建新的元素節點 var elem = document.createElement('button'); // 創建文本節點 var text = document.createTextNode('New Button'); elem.appendChild(text); // 創建屬性節點 var attribute = document.createAttribute('class'); // 設置屬性的值 attribute.nodeValue = 'button'; // 將屬性節點添加到元素節點 elem.setAttributeNode(attribute); div.appendChild(elem);

上述示例代碼先通過 createAtrribute() 方法創建了 ，再通過 createTextNode() 方法創建了一個新的文本節點，并將其添加到新創建的 button 元素中。最后，通過 createAttribute() 方法創建 class 屬性節點，并設置了屬性值為 button，再將該屬性節點添加到新創建的 button 元素中。

完整示例代碼請點擊右邊的鏈接: createAtrribute() 方法完整示例代碼

---

本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。

本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

總結

以上是生活随笔為你收集整理的【EASYDOM系列教程】之创建页面元素的全部內容，希望文章能夠幫你解決所遇到的問題。

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