【EASYDOM系列教程】之建立頁面元素

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 是返回值，表示建立的屬性節點。

值得注意的是:

1. 建立屬性節點方法只具備屬性名稱，沒有屬性值。想要設置屬性值須要經過 nodeValue 屬性完成。

2. 因爲屬性節點不是元素節點的子節點，不能使用添加子節點方式操做屬性節點。想要添加屬性節點須要經過 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 國際許可協議進行許可。