appendChild(node)

从后面插入一个子元素

createElement(); //创建元素节点
createTextNode(); //创建文本节点

 <div id="parent">
        <!-- <p>hello world</p> -->
        <div id="good">good</div>
    </div>
    <script>
        var parent = document.getElementById("parent")
        var good = document.getElementById("good");
        var p =document.createElement("p");
        p.innerHTML = "hello world"
        /* 
        appendChild()
        给元素增加节点 
        */
        parent.appendChild(p);
    </script>

insertBefore(newChild,oldChild)

 从父元素的前面插入一个节点

<div id="parent">
        <p>第一个</p>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var p = document.createElement("p");
        var txt = document.createTextNode("第零个");
        p.appendChild(txt)       
        parent.insertBefore(p,parent.firstElementChild)
    </script>

                ![image.png](https://cdn.nlark.com/yuque/0/2019/png/446381/1567233941760-6ce846dc-e0b0-41c6-bb0b-c4cd8a2c3dd9.png#align=left&display=inline&height=86&name=image.png&originHeight=86&originWidth=81&size=1350&status=done&width=81)