节点操作

节点

     <button onclick="fn()" class="btn">创建一个div</button>
<script>
   function fn(){
         /* document.createElement("元素名")创建元素节点 */
        let div1=document.createElement('div');
         /* document.createTextNode("文本") 创建文本节点 */
        let div2=document.createTextNode('我是大卫')
        /* A.appendChild(B)把B节点追加至A节点的末尾 */
        div1.appendChild(div2)
        /* 获取body使用appendChild插入div */
        let body=document.querySelector('body')
        body.appendChild(div1)

        
        let didi=document.querySelector('.btn')
        /* 创建h1元素节点 */
        let h1=document.createElement('h1')
        /* 创建文本节点 */
        let gege2=document.createTextNode('我是h1')
        /* B节点追加进A节点 */
        h1.appendChild(gege2)
        /* 父节点.insertBefore( A,B )把A节点插入到B节点之前*/
        body.insertBefore(h1,didi )
    }
</script>
复制代码

克隆和删除

       <div onclick="kl()" class="div-class">我是div1</div>
<button onclick="rm()">删除第一个</button>
<script>
    let body=document.querySelector('body');
    /* removeChild(元素)（）是删除的元素 */
    function rm(){
        let div1=document.getElementsByClassName('div-class')[0]
        body.removeChild(div1)
    }
    function kl(){
        /* let div1=document.createElement('div')
        let text=document.createTextNode('我是div1')
        div1.appendChild(text)
        body.appendChild(div1) */


        /* cloneNode(deep)复制某个指定的节点 */
        /*获取自己的元素再插入到body中是可以的,但是插入的时候发现都一个元素节点

        两种插入的实现方式第一种创建新闺节点去插入第二种 clone出一个新的节点去插入*/

        /* cloneNode如果不传true,表示传入自身节点（不包括子节点） */
        /* 传true表示 既克隆自身节点 ，也克隆自身子节点*/
        let div1=document.getElementsByClassName('div-class')[0]
        let divCL=div1.cloneNode(true);
        body.appendChild(divCL)
        /*获取自己的元素再插入到body中是不可以的·两种插入的实现方式第一种创建新的节点去插入`I*/

作者：用户3858260427314
链接：juejin.cn/post/704629… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。