前言

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>
 

新增前

新增後

appendChild() 新增子節點

如果文件樹中已經存在了 newchild，它將從文件樹中刪除，然後重新插入它的新位置。如果 newchild 是 DocumentFragment 節點，則不會直接插入它，而是把它的子節點按序插入當前節點的 childNodes[] 陣列的末尾。

DocumentFragment 節點代表一個文件的片段，本身就是一個完整的 DOM 樹形結構。
它沒有父節點，parentNode 返回 null ，但是可以插入任意數量的子節點。
它不屬於當前文件，操作 DocumentFragment 節點，要比直接操作 DOM 樹快得多。 
它一般用於構建一個 DOM 結構，然後再插入當前文件。
 

可以使用 appendChild() 方法把元素從頁面上一個位置移到另外一個位置。

<div id="demo">
    <p id="p1">這是文字內容</p>
    <button>點我</button>
</div>
<div id="demo2">
    <p id="p2">新位置</p>
</div>
<script>
    // demo 下 id=p1節點
    node = document.getElementById('p1');
    
    demo2 = document.getElementById('demo2');
    // div 新增子節點
    demo2.appendChild(node);
</script>
</body>
 

移動前

移動後

insertBefore() 方法

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法

node.insertBefore(newnode,existingnode)

新增到div子元素，p標籤前面

<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>

如果第二個引數傳null，跟 appendChild() 方法實現效果一樣，在div後面加子元素

div.insertBefore(btn, null);

removeChild 移除子節點

removeChild 移除父元素下的子節點

移除div下面的子元素

<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

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>

p2後新增元素,執行結果

<div id="demo">
    <p id="p1">這是文字內容</p>
    <p id="p2">hello world</p><button>點我</button>
</div>

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>

p2前新增元素，執行結果

<div id="demo">
    <p id="p1">這是文字內容</p>
    <button>點我</button><p id="p2">hello world</p>
</div>

remove 刪除指定元素

<div id="demo">
    <p id="p1">這是文字內容</p>
    <p id="p2">hello world</p>
</div>
<script>
    div = document.getElementById('p2');
    div.remove();
</script>

replaceWith 替換指定元素

<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('p2');
    div.replaceWith(btn);
</script>

總結

以上方法總結