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

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

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

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é)點(diǎn) var elem = document.createElement('button'); div.appendChild(elem);

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

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

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

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

textNode = document.createTextNode(data);

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

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

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

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

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

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

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

attributeNode = document.createAttribute(name);

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

值得注意的是:

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

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

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

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

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

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

---

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

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

總結(jié)

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

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