JavaScript 創(chuàng)建元素

■知識點(diǎn)

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

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

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

■實(shí)例設(shè)計(jì)

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

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

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

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

console.log(info);

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

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

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

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