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

創(chuàng)建元素節(jié)點

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

element = document.createElement(tagName);

上述語法格式中，tagName 是參數(shù)，表示創(chuàng)建元素的元素名稱。element 是返回值，表示創(chuàng)建的元素。

值得注意的是: createElement() 方法優(yōu)先將參數(shù)轉(zhuǎn)換為小寫。

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

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

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

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

創(chuàng)建文本節(jié)點

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

textNode = document.createTextNode(data);

上述語法格式中，data 是參數(shù)，包含了放在文本節(jié)點中的內(nèi)容，是一個字符串。textNode 是返回值，表示創(chuàng)建的文本節(jié)點。

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

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

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

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

創(chuàng)建屬性節(jié)點

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

attributeNode = document.createAttribute(name);

上述語法格式中，name 是參數(shù)，屬性節(jié)點的屬性名稱。attributeNode 是返回值，表示創(chuàng)建的屬性節(jié)點。

值得注意的是:

創(chuàng)建屬性節(jié)點方法只具有屬性名稱，沒有屬性值。想要設(shè)置屬性值需要通過 nodeValue 屬性完成。

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

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

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

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

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

---

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

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

總結(jié)

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

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