html添加子节点方法,HTML DOM appendChild() 方法

HTML DOM appendChild() 方法

appendChild()方法的作用是：在指定父节点的子节点列表的末尾添加一个节点。

如果给定的子节点是文档中现有节点的引用，appendChild()将它从当前位置移动到新位置(参见下面的“更多示例”)。

使用insertBefore()方法可在指定的现有子节点之前插入新的子节点。

语法：node.appendChild(node)

示例var newElem = document.createElement("h3");   // 创建一个新的h3元素

var newContent = document.createTextNode("嗨，你好!"); // 创建一些文本内容

newElem.appendChild(newContent); //  将文本节点添加到新创建的h3

document.body.appendChild(newElem);  //  将新创建的元素及其内容添加到DOM中测试看看‹/›

注意：如果要创建带有文本的新元素，请记住将文本创建为Text节点，然后将其附加到元素，然后将该元素附加到文档。

浏览器兼容性

所有浏览器完全支持appendChild()方法：Method

appendChild()是是是是是

参数值参数描述

node要附加到给定父节点的节点(通常是元素)

技术细节返回值：返回的值是附加的子元素

DOM版本：DOM级别1

更多示例

创建一个

元素并将其附加到一个

元素：

示例var para = document.createElement("p");   // Create a 

 node

var txt = document.createTextNode("This is a paragraph.");// Create a text node

para.appendChild(txt);// Append the text to 

document.getElementById("demo").appendChild(para);// Append 

 to 

测试看看‹/›

创建一个

元素并将其附加到文档主体的末尾：

示例var para = document.createElement("p");   // Create a 

 node

var txt = document.createTextNode("This is a paragraph.");// Create a text node

para.appendChild(txt);// Append the text to 

document.body.appendChild(para);// Append 

 to body测试看看‹/›

此示例将元素从其当前位置移动到新位置：

示例var elem = document.getElementById("myList2").lastElementChild;

document.getElementById("myList1").appendChild(elem);测试看看‹/›

相关参考