2.节点的增删改查

2.1增加节点

appendChild 向节点的子节点列表的末尾添加新的子节点 只能添加节点

createElement() 创建元素节点
createTextNode() 创建文本节点
createAttribute()创建属性节点
innerHTML  元素里的文字

    <div id="app">
        <p>one</p>
    </div>
    <script>
        /* appendChild  -->在父元素的最后面添加一个元素 */
        var app = document.getElementById("app");
        var p = document.createElement("p");
        p.innerHTML = "hello world";
        app.appendChild(p);
    </script>

append 在结尾插入节点 可以添加节点和字符串 / prepend 在开头插入节点

<ul id="app">
        <li>html</li>
</ul>
    <script>
        // append,prepend
        var app =  document.getElementById("app");
        var p1 = "<h1>我是在结尾插入的</h1>";
        var p2 = "<h1>我是在开头插入的</h1>"
        app.append(p1);
        app.prepend(p2)
    </script>

insertBefore 插入节点 parentNode.insertBefore ( newNode,在谁前面 ) 在已有的子节点前插入一个新的子节点

<ul id="app">
        <li>html</li>
        <li id="js">javascript</li>
</ul>
    <!-- 
        innerHtml 元素里的文字
        parentNode.insertBefore(newNode,在谁前面) 插入节点
     -->
    <script>
        var app = document.getElementById("app")
        var li = document.createElement("li")
        var js = document.getElementById("js")
        li.innerHTML = "vue"
        console.log(li);
        app.insertBefore(li,js)
        console.log(app)
    </script>

before / after

<p id="p">hello world</p>
    <script>
        var p =  document.getElementById("p");
        p.after("after")
        p.before("before")
    </script>

2.2删除节点

removeChild() 删除节点

    <div id="app">
        <p>one</p>
        <p id="two">two</p>
    </div>
    <script>
        var app = document.getElementById("app");
        var two = document.getElementById("two")
        app.removeChild(two);
    </script>

实例：点击删除按钮，删除节点

    <div id="app">
        <p>one</p>
        <p id="two">two</p>
        <button id="btn">删除</button>
    </div>
    <script>
        /* removeChild  从父节点上删除某个子节点
        parentElment.removeChild(childElement)
         */
        var app = document.getElementById("app");
        var two = document.getElementById("two")
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            app.removeChild(two);
        }
    </script>

    <div id="app">
        <p>one</p>
        <p id="two">two</p>
        <button id="btn">删除</button>
    </div>
    <script>
        /*
        remove();
        element.remove();
         */
        var two = document.getElementById("two")
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            two.remove();
        }
    </script>

2.3替换节点

replaceChild 替换节点 parentNode.replaceChild ( newNode,targetNode ) 替换某个元素

    <div id="app">
        <!-- <h1>change</h1> -->
        <p id="child">hello world</p>
    </div>
    <script>
        /* 
        替换节点
        parentNode.replaceChild(newNode,targetNode)
         */
        var app = document.getElementById("app");
        var h1 = document.createElement("h1");
        h1.innerHTML = "change";
        var child = document.getElementById("child");
        app.replaceChild(h1,child)
    </script>

2.4克隆节点

cloneNode

node.cloneNode( )  
括号为空或false浅拷贝，只复制标签不复制内容
括号为true，深拷贝，也复制内容
<div id="app">
    <div id="one">hello world</div>
</div>
    <script>
        var app = document.getElementById("app")
        var one = document.getElementById("one")
        var test = one.cloneNode(true)
        console.log(test);
        app.appendChild(test);
        console.log(app);
    </script>