JavaScript中的appendChild（）方法

 

JavaScript中的appendChild（）方法

https://www.cnblogs.com/fengxiongZz/p/6801931.html

 

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>
复制代码

 « 上一篇：任务十四：零基础JavaScript编码（二）
» 下一篇：JavaScript中innerHTML与innerText，createTextNode的区别

 
 
好文要顶 关注我 收藏该文  
0
0
 
 
 
 
 
posted @ 2018-03-01 09:30  sky20080101  阅读(122)  评论(0)    收藏  举报