【JavaScript36】HTML DOM创建/插入/删除/替换元素

createElement 创建元素

• document.createElement() 可以创建一个元素
• document.createTextNode() 创建一个文本节点
• appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

<div id="demo">
    <p id="p1">这是文本内容</p>
</div>
<script>
    // div下添加一个子元素节点，放到p标签下
    btn = document.createElement('button');
    // 给button添加文本节点
    btn.appendChild(document.createTextNode('点我'))

    div = document.getElementById('demo');
    // div 添加子节点
    div.appendChild(btn);
</script>

insertBefore() 方法

• insertBefore() 方法可在已有的子节点前插入一个新的子节点。
• 语法：node.insertBefore(newnode,existingnode)
  • 如果第二个参数传null，跟 appendChild() 方法实现效果一样，在div后面加子元素
    

<div id="demo">
    <p id="p1">这是文本内容</p>
</div>
<script>
    // 创建元素节点
    btn = document.createElement('button');
    // 给button添加文本节点
    btn.appendChild(document.createTextNode('点我'))

    div = document.getElementById('demo');
    // div 添加子节点
    div.insertBefore(btn, document.getElementById('p1'));
</script>

removeChild 移除子节点

<div id="demo">
    <p id="p1">这是文本内容</p>
    <p id="p2">hello world</p>
</div>
<script>
    div = document.getElementById('demo');
    div.removeChild(document.getElementById('p1'));
</script>

replaceChild 替换子节点

<div id="demo">
    <p id="p1">这是文本内容</p>
    <p id="p2">hello world</p>
</div>
<script>
    // 创建节点
    btn = document.createElement('button');
    // 给button添加文本节点
    btn.appendChild(document.createTextNode('点我'))

    div = document.getElementById('demo');
    div.replaceChild(btn, document.getElementById('p2'));
</script>

更简单方法

• appendChild，insertBefore, removeChild, replaceChild 这几个方法都依赖于父元素。还有几个更简便的方法，不依赖于父元素，可以直接在当前元素操作

//after 取代 appendChild
<div id="demo">
    <p id="p1">这是文本内容</p>
    <p id="p2">hello world</p>
</div>
<script>
    // 创建节点
    btn = document.createElement('button');
    // 给button添加文本节点
    btn.appendChild(document.createTextNode('点我'))
    // p2标签前面添加元素
    div = document.getElementById('p2');
    div.after(btn);
</script>

//before 可以取代insertBefore
<div id="demo">
    <p id="p1">这是文本内容</p>
    <p id="p2">hello world</p>
</div>
<script>
    // 创建节点
    btn = document.createElement('button');
    // 给button添加文本节点
    btn.appendChild(document.createTextNode('点我'))
    // p2标签前面添加元素
    div = document.getElementById('p2');
    div.before(btn);
</script>

//remove 删除指定元素
<div id="demo">
    <p id="p1">这是文本内容</p>
    <p id="p2">hello world</p>
</div>
<script>
    div = document.getElementById('p2');
    div.remove();
</script>

## 总结
![](/i/l/?n=23&i=blog/1544134/202308/1544134-20230810231330989-2081436314.png)