DOM节点操作

DOM节点

<div id="app"></div>
    <button onclick="create()">创建</button>
    <button onclick="remove()">删除</button>
    <button onclick="insert()">插入</button>
    <button onclick="replace()">替换</button>

 var oapp = document.querySelector("#app");

创建 create()

  function create() {
     
        for (var i =0; i < 10; i++) {
     
            var op = document.createElement("p");
            var text = document.createTextNode("这是第" + i + "元素");
            op.appendChild(text);
            oapp.appendChild(op);    
        }
    }

删除 remove()

//remoeChild appendChild insertBefore（新节点，将要在谁前面插入）(在已有的子节点前插入一个)
//replaceChild 替换节点，新的替换旧的
//都是要获得他们的父元素才能操作

  function remove() {
     
        var op = document.querySelectorAll("p")[0];
        oapp.removeChild(op);
    }

insertBefore() 插入

 function insert() {
     
        var op = document.querySelectorAll("p")[0];
        var text = document.createTextNode("hello");
        var oul = document.createElement("ul");
        oul.appendChild(text);
        oapp.insertBefore(oul,op);
    }

替换 replace（）

function replace() {
     
    var oh1 = document.createElement("h1");
    var text = document.createTextNode("hello");
    var op = document.querySelectorAll("p")[0];
    oul.appendChild(text);
    oapp.replaceChild(oh1,op);
}