HTML DOM appendChild()方法

最新推荐文章于 2023-06-28 12:42:04 发布

小田同學

最新推荐文章于 2023-06-28 12:42:04 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： dom html

本文链接：https://blog.csdn.net/Sabrina_TSM/article/details/50700190

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

appendChild（）
1）向节点添加最后一个子节点
eg:

<html>
<body>
<ul id="a">
<li>Coffee</li>
<li>Tea</li>
</ul>
<p >请点击按钮向列表中添加项目。</p>
<script>
function add()
{
    var para=document.createElement("li");
    var node=document.createTextNode("Water");
    para.appendChild(node);
    document.getElementById("a").appendChild(para);
}
</script>
<input type="button" onclick="add()" value="亲自试一试">
<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
 </body>
</html>

2)从一个元素向另一个元素移动
eg:

<html>
<body>
<ul id="a">
<li>Coffee</li>
<li>Tea</li>
</ul>
<ul id="b">
<li>Water</li>
<li>Milk</li>
</ul>
<p>请点击按钮向列表中添加项目。</p>
<script>
function move()
{
    var node=document.getElementById("b").lastChild;
    document.getElementById("a").appendChild(node);
}
</script>
<input type="button" onclick="move()" value="亲自试一试">
<p>请点击按钮把项目从一个列表移动到另一个列表中</p>
 </body>
</html>