JavaScript 創(chuàng)建元素

■知識點

使用document對象的createElement()方法能夠根據(jù)參數(shù)指定的標(biāo)簽名稱創(chuàng)建一個新的元素，并返回新建元素的引用。其用法如下：

    var element = document.createElement     ("tigName");

其中，參數(shù)element表示新建元素的引用，createElement()是document對象的一個方法，該方法只有一個參數(shù)，用來指定創(chuàng)建元素的標(biāo)簽名稱。

■實例設(shè)計

【示例1】下面的代碼在當(dāng)前文檔中創(chuàng)建了一個段落標(biāo)記P，存儲到變量p中。由于該變量表示一個元素節(jié)點，所以它的nodeType屬性值等于1，而nodeName屬性值等于p。

var p = document.createElement("p");              //創(chuàng)建段落元素

var info = "nodeName: " + p.nodeName;      //獲取吞素名稱

info += ", nodeType: " + p.nodeType;             //獲取元素類型，如果為1則表示元素節(jié)點

console.log(info);

使用createElement()方法創(chuàng)建的新元素不會被自動添加到文檔中。如果要把這個元素添加到文檔中，還需要使用appendChild()、insertBefore()或 replaceChild()方法來實現(xiàn)。

【示例2】下面的代碼演示了如何把新創(chuàng)建的p元素增加到body元素下。當(dāng)元素被添加到文檔樹中，就會立即顯示出來。

var p = document.createElement ("p");             //創(chuàng)建段落元素

document.body.appendChild(p);                    //増加段落元素到 body 元素下