本文详解JavaScript中appendChild()方法的使用。该方法用于向节点列表末尾添加新的子节点，同时也支持将元素从一个父节点移动到另一个父节点。文章通过向列表添加项以及下拉框选项移动两个具体实例，展示了创建节点、文本节点及DOM操作的具体代码实现。
appendChild() 方法的功能是将新的子节点添加到指定节点的子节点列表末尾。
实例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮将项目添加到列表中</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>
<p><strong>注意:</strong><br>首先创建一个节点，<br> 然后创建一个文本节点，<br>然后将文本节点添加到LI节点上。<br>最后将节点添加到列表中。</p>
</body>
</html>页面效果：
实例一展示了如何向无序列表（ul）中添加列表项（li）。
2.appendChild() 方法还可以用于将元素从一个父元素移动到另一个父元素。
实例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="select1" multiple="multiple" size="10">
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
<option>左5</option>
</select>
<span>
<button onclick="toRight()">>></button>
<button onclick="toLeft()"><<</button>
</span>
<select id="select2" multiple="multiple" size="10">
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
<option>右5</option>
</select>
<script type="text/javascript">
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
function toRight() {
var childs = select1.childNodes;
for (var i = 0; i < childs.length; i++) {
if (childs[i].selected) {
select2.appendChild(childs[i]);
}
}
}
function toLeft() {
var childs = select2.childNodes;
for (var i = 0; i < childs.length; i++) {
if (childs[i].selected) {
select1.appendChild(childs[i]);
}
}
}
</script>
</body>
</html>页面效果：
实例二演示了如何在两个下拉框之间移动选项。
总结：
appendChild() 方法的主要作用是将最后一个子节点添加到指定节点中，此外，利用该方法也可以实现元素在不同父节点之间的移动操作。
到此这篇关于JavaScript中的appendChild()方法的文章就介绍到这了,更多相关jsappendChild()内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！