JavaScript 對(duì)象
- JavaScript Array 對(duì)象
- JavaScript Boolean 對(duì)象
- JavaScript CSS 樣式聲明對(duì)象
- JavaScript Math 對(duì)象
- JavaScript Number 對(duì)象
- JavaScript String 對(duì)象
- JavaScript 正則表達(dá)式(RegExp) 對(duì)象
- JavaScript Console 對(duì)象
JavaScript 參考手冊(cè)
JS DOM參考手冊(cè)
- JS和HTML DOM參考手冊(cè)
- HTML DOM Attribute 對(duì)象
- HTML DOM Document 對(duì)象
- HTML DOM Element 對(duì)象
- JavaScript History 對(duì)象
- JS DOM HTMLCollection 對(duì)象
- JavaScript Location 對(duì)象
- JavaScript Navigator 對(duì)象
- JavaScript Screen 對(duì)象
- HTML DOM Style 對(duì)象
- JavaScript Window 對(duì)象
- JS Storage 對(duì)象
- Event Objects(事件對(duì)象)
- HTML DOM Events
HTML DOM appendChild() 方法
appendChild()方法的作用是：在指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加一個(gè)節(jié)點(diǎn)。
如果給定的子節(jié)點(diǎn)是文檔中現(xiàn)有節(jié)點(diǎn)的引用，appendChild()將它從當(dāng)前位置移動(dòng)到新位置(參見(jiàn)下面的“更多示例”)。
使用insertBefore()方法可在指定的現(xiàn)有子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)。
語(yǔ)法：
node.appendChild(node)
var newElem = document.createElement("h3"); // 創(chuàng)建一個(gè)新的h3元素
var newContent = document.createTextNode("嗨，你好!"); // 創(chuàng)建一些文本內(nèi)容
newElem.appendChild(newContent); // 將文本節(jié)點(diǎn)添加到新創(chuàng)建的h3
document.body.appendChild(newElem); // 將新創(chuàng)建的元素及其內(nèi)容添加到DOM中測(cè)試看看?/?注意：如果要?jiǎng)?chuàng)建帶有文本的新元素，請(qǐng)記住將文本創(chuàng)建為T(mén)ext節(jié)點(diǎn)，然后將其附加到元素，然后將該元素附加到文檔。
瀏覽器兼容性
所有瀏覽器完全支持appendChild()方法：
| Method |  |  |  |  |  |
| appendChild() | 是 | 是 | 是 | 是 | 是 |
參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| node | 要附加到給定父節(jié)點(diǎn)的節(jié)點(diǎn)（通常是元素） |
技術(shù)細(xì)節(jié)
| 返回值： | 返回的值是附加的子元素 |
|---|---|
| DOM版本： | DOM級(jí)別1 |
更多示例
創(chuàng)建一個(gè)<p>元素并將其附加到一個(gè)<div>元素：
var para = document.createElement("p"); // Create a <p> node
var txt = document.createTextNode("This is a paragraph.");// Create a text node
para.appendChild(txt);// Append the text to <p>
document.getElementById("demo").appendChild(para);// Append <p> to <div>測(cè)試看看?/?創(chuàng)建一個(gè)<p>元素并將其附加到文檔主體的末尾：
var para = document.createElement("p"); // Create a <p> node
var txt = document.createTextNode("This is a paragraph.");// Create a text node
para.appendChild(txt);// Append the text to <p>
document.body.appendChild(para);// Append <p> to body測(cè)試看看?/?此示例將元素從其當(dāng)前位置移動(dòng)到新位置：
var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(elem);測(cè)試看看?/?相關(guān)參考
HTML DOM參考：node.hasChildNodes()方法
HTML DOM參考：node.insertBefore()方法
HTML DOM參考：node.removeChild()方法
HTML DOM參考：node.replaceChild()方法
HTML DOM參考：document.createElement()方法
HTML DOM參考：document.createTextNode()方法
HTML DOM參考：document.adoptNode()方法
HTML DOM參考：document.importNode()方法