JavaScript中的appendChild（）方法

最新推荐文章于 2022-07-07 16:22:41 发布

weixin_30887919

最新推荐文章于 2022-07-07 16:22:41 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fengxiongZz/p/6801931.html

本文通过两个具体案例介绍了appendChild()方法的基本用法：一是向指定节点添加最后一个子节点；二是从一个元素向另一个元素移动子节点。这些示例有助于读者更好地理解和掌握appendChild()方法。

appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。

案例一：向节点添加最后一个子节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="mylist">
            <li>牛奶</li>
            <li>橡胶</li>
            <li>花生</li>
        </ul>
        <input type="text" id="listname" name="listname"/>
        <input type="button" value="添加列表项" onclick="mylist();"/>
        
         <script type="text/javascript">
            function mylist(){        
                var node=document.createElement("li"); //创建一个li节点
                var testnode=document.getElementById("listname").value;//拿到input输入框的值
                var asd=document.createTextNode(testnode)//定义创建文本节点
                node.appendChild(asd); //把文本节点追加到li节点
                document.getElementById("mylist").appendChild(node);//把li节点添加到ul中
            }
            </script>  
    </body>
</html>

案例二：从一个元素向另一个元素移动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="mylist1">
            <li>牛奶</li>
            <li>橡胶</li>
            <li>花生</li>
        </ul>

        <ul id="mylist2">
            <li>苹果</li>
            <li>梨子</li>
            <li>草莓</li>
        </ul>
        <input type="button" value="点击移动" onclick="mylist();"/>
        
        <script type="text/javascript">
            function mylist(){
                //定义节点 并把mylist2中的第一子节点赋值给node
                var node=document.getElementById("mylist2").firstChild; 
                //将node里面获取的子节点 添加到mylisf1里面
                document.getElementById("mylist1").appendChild(node);     
            }
        </script>
    </body>
</html>