三、节点的方法

一、增加节点

1-1、appendChild

追加节点(末尾添加节点) 向节点的子节点列表的末尾添加新的子节点

• createElement(); //创建元素节点

• createTextNode(); //创建文本节点 ```javascript

<script>
    var app = document.getElementById("app")
    //创建属性节点
    var p = document.createElement("p");
    var text = document.createTextNode("hello")
    p.appendChild(text);
    app.appendChild(p)
</script>

<a name="swHw4"></a>
### 
<a name="6rtLB"></a>
### 1-2、insertBefore 插入节点
`parentNode.insertBefore(newNode,在谁前面)`<br />**在已有的子节点前插入一个新的子节点**<br />**innerHtml  元素里的文字**
```javascript
<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>

1-3、append：在被选元素的末尾插入一级子元素

<ul id="app">
        <li>html</li>
    </ul>


var app =  document.getElementById("app");
        var p = "<h1>hello world<h1>";
        app.append(p);

1-4、prepend:在被选元素的首部插入一级子元素

<ul id="app">
        <li>html</li>
    </ul>


var app =  document.getElementById("app");
        var p = "<h1>hello world<h1>";
        app.prepend(p);

1-5、before:在元素之前插入,可以传多个值

<p id="p">hello world</p>

    <script>
        var p =  document.getElementById("p");
        p.before("before")

1-6、after:在元素之后插入

<p id="p">hello world</p>

    <script>
        var p =  document.getElementById("p");
        p.after("after")

二、删除节点

2-1、 parentNode.removeChild(childNode)

<div id="app">
        <div id="child">child</div>
    </div>
    <script>
        // removeChild()让从元素DOM树,渲染树上都消失
        var app = document.getElementById("app");
        var child = document.getElementById("child");
        app.removeChild(child);
    </script>

三、替换节点

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

3-1 、 replaceChild

<div id="app">
        <div id="child">

        </div>
    </div>

    <!-- 替换某个元素 -->
    <script>
        var app=document.getElementById("app")
        var child=document.getElementById("child");
        var p=document.createElement("p");
        p.innerHTML="hello";
        app.replaceChild(p,child);
    </script>

四、克隆节点

4-1 cloneNode

node.cloneNode()
括号为空或false浅拷贝，只复制标签不复制内容
括号为true，深拷贝，也复制内容

<div id="app">
        <div class="one">
            hello
        </div>
    </div>

    <script>
        var app=document.getElementById("app")
        var child=document.getElementsByClassName("one")[0];
        var test = one.cloneNode(true);
        console.log(test);
        app.appendChild(test);
    </script>