JS建立HTML元素

在JavaScript 中，使用 document 物件的 createElement() 方法能夠根據引數指定的標籤名稱建立一個新的元素，並返回新建元素的參照。用法如下：

var element = document.getElement("tagName");

其中，element 表示新建元素的參照，createElement() 是 document 物件的一個方法，該方法只有一個引數，用來指定建立元素的標籤名稱。

範例1

下面程式碼在當前文件中建立了一個段落標記 p，儲存到變數 p 中。由於該變數表示一個元素節點，所以它的 nodeType 屬性值等於 1，而 nodeName 屬性值等於 p。

var p = document.createElement("p");  //建立段落元素
var info = "nodeName:" + p.nodeName;  //獲取元素名稱
info += ", nodeType:" + p.nodeType;  //獲取元素型別，如果為1則表示元素節點
console.log(info);

使用 createElement() 方法建立的新元素不會被自動新增到文件裡。如果要把這個元素新增到文件裡，還需要使用 appendChild()、insertBefore() 或 replaceChild() 方法實現。

範例2

下面程式碼演示如何把新建立的 p 元素增加到 body 元素下。當元素被新增到文件樹中，就會立即顯示出來。

var p = document.createElement("p");  //建立段落元素
document.body.appendChild(p);  //增加段落元素到body元素下