码迷,mamicode.com
首页 > Web开发 > 详细

DOM(3)js创建,添加元素

时间:2017-03-23 18:32:11      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:创建   ntb   app   back   box   class   rem   方法   remove   

1.createElement() , createTextNode() , appendChild()

       <script>            
                   var body=document.getElementsByTagName(body)[0]; //获取body 元素
                
                var div=document.createElement("div"); //创建元素节点直接写元素名
                body.appendChild(div);// appendChild()是添加子元素 ,(多个)默认添加到子元素的末尾
                
                var str=document.createTextNode(hello);//创建文本节点
                div.appendChild(str);
                
        </script>

2.insertBefore(x,y) ,在指定子元素y前加入新的x子元素,(而appendChild()是把子元素加到最后)

     <ul id="box">
            <li>苹果</li>
            <li id="li">梨子</li>
        </ul>
        <script>            
                var box=document.getElementById(box);
                var xg=document.createElement(li);
                var str=document.createTextNode(西瓜)
                xg.appendChild(str);
                
                var lizi=document.getElementById(li);
                lizi.parentNode.insertBefore(xg,lizi);
        </script>

3.replaceChild(x,y); 将子节点y 换成子节点x,y包括它所有的子节点,

        <ul id="box">
            <li>苹果</li>
            <li id="li">梨子</li>
        </ul>
        <script>            
                var box=document.getElementById(box);
                var p=document.createElement(p);
                box.parentNode.replaceChild(p,box);  //整个ul(包括li)的html结构, 被替换为<p></p>
        </script>                

4.cloneNode() 方法可以把子节点复制出来

     <ul id="box">
            <li>苹果</li>
            <li id="li">梨子</li>
        </ul>
        <script>
                var body=document.getElementsByTagName(body)[0];
                var box=document.getElementById(box);
                var li=document.getElementById(li);
                var clone=li.cloneNode(true);
                box.appendChild(clone);  // "梨子"复制一份加到ul中
                
                var clone2=box.cloneNode(true);
                body.appendChild(clone2);// 整个ul复制一份,加到body中
        </script>

5. removeChild() 移除指定的子节点

       <ul id="box">
            <li>苹果</li>
            <li id="li">梨子</li>
        </ul>
        <script>
                var box=document.getElementById(box);
                box.removeChild(li); //移除梨子那一项 li
        </script>            

 

DOM(3)js创建,添加元素

标签:创建   ntb   app   back   box   class   rem   方法   remove   

原文地址:http://www.cnblogs.com/luhailin/p/6606584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!