DOMjs创建，添加元素

Posted 2020-09-06 DOIT

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>