JS 节点的创建、克隆和删除1.创建 document.createElement("元素名") 创建元素节点 docu

1.创建

document.createElement("元素名") 创建元素节点
document.createTextNode("文本") 创建文本节点
A.appendChild(B) 把B节点追加至A节点的末尾
父节点.insertBefore( A,B ) 把A节点插入到B节点之前

<body>
    <button onclick="add()">添加</button>
</body>
<script>
    function add() {
        let b = document.querySelector('body');
        let h = document.createElement('h1');
        let ht = document.createTextNode('我是h1')
        h.appendChild(ht);
        let button1 = document.querySelectorAll('button')[0];
        b.insertBefore(h, button1)
    }
</script>

2.克隆

cloneNode() 表示只传入自身节点，不包括子节点。
cloneNode(true) 表示既克隆自身节点，也克隆了自身的子节点。

<body>
    <h1 onclick="cloneSelf()">I am h1.</h1>
</body>
<script>
    function cloneSelf() {
        let h = document.getElementsByTagName('h1')[0];
        let b = document.querySelector('body');
        let cloneH = h.cloneNode(true);
        b.insertBefore(cloneH, h)
    }
</script>

3.删除

父元素.removeChild(要被删除的元素)

<body>
    <button onclick="remove()">删除</button>
</body>
<script>
    function remove() {
        let h = document.getElementsByTagName('h1')[0];
        let b = document.querySelector('body');
        b.removeChild(h)
    }
</script>