使用 JavaScript 將 HTML 內容附加到現有的 HTML 元素

1. 使用 InnerHTML 新增新 HTML 節點的缺點
2. 新增 HTML 內容而不替換 DOM 元素
3. 在 JavaScript 中使用 appendChild() 附加 HTML 內容
4. 使用 insertAdjacentHTML() 新增 HTML 節點

使用 javascript 將 HTML 內容新增到 div 或其他 HTML 元素很容易。我們可以使用新的 HTML 內容設定元素的 HTMLElement.innerHTML 屬性。但在此過程中，它會清除新增到其中的所有動態屬性。

使用 InnerHTML 新增新 HTML 節點的缺點

• HTMLElement.innerHTML 的工作原理是刪除元素內的 HTML 內容，然後使用包含在其中的新 HTML 片段重新新增它們。本質上，它替換了 HTML 內容，而不僅僅是新增一個新內容。
• 當我們使用 innerHTML 屬性將新的 HTML 元素新增到 DOM 時，它也會刪除所有後代節點，然後將它們替換為通過解析新 HTML 內容（分配給 的 HTML 字串）構建的新節點 innerHTML 屬性）並重新呈現整個 HTML。
• 鮮為人知的是，在經過網路安全審查的專案中使用 innerHTML 時，程式碼可能會被拒絕。建議不要直接使用 innerHTMl，因為它可能有潛在的安全風險（更多詳細資訊，請參閱 MDN 連結）。

新增 HTML 內容而不替換 DOM 元素

要將一段 HTML 程式碼新增到我們現有的 DOM，我們可以使用以下 javascript 內建函式，而不必擔心丟失任何已經附加的動態內容。

• appendChild()
• insertAdjacentHTML()

在 JavaScript 中使用 appendChild() 附加 HTML 內容

appendChild() 的作用與 innerHTML 的作用相同。我們可以使用這兩種方法將 HTML 內容新增到節點。兩種方法之間的區別在於 appendChild() 是一個函式，而 innerHTML 是一個屬性。appendChild() 將向現有 DOM 元素新增一個節點，而不是像 innerHTML 屬性那樣替換 DOM 的內容。

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

我們使用上述程式碼建立了一個表單來捕獲使用者的姓名和地址。地址通常有多於一行。因此，我們建立了一個按鈕，在單擊以捕獲這些額外的地址行時新增新的輸入欄位。以下是建立新輸入欄位的過程。

1. 我們在 Add Address Line 按鈕的點選事件上呼叫 addAddressLine 函式。
2. 在函式中，我們使用 document.createElement('input') 函式動態建立 HTML input。它返回儲存在 i 變數中的建立的 input 元素。
3. 接下來，我們使用 setAttribute() 方法將 type 和 placeholder 屬性設定為建立的 input 變數。
4. 我們已經準備好將 input 元素新增到現有的 div 結構中。因此，我們使用 docuemnt.getElementById() 查詢 address div，它返回整個 div 結構，然後我們使用 JavaScript 的 appendChild(i) 函式。
5. appendChild(i) 函式新增由變數 i 儲存的動態建立的 input 元素，並將其放在 address``div 的末尾。每次新增新輸入欄位時，我們都使用 lineCount 來增加佔位符值。

注意

• 我們還可以使用較新的方法 append() 將建立的元素附加到 DOM。javascript 方法 append 允許我們使用 DOMString（簡單字串文字）作為引數並且不返回任何值。請注意 Internet Explorer 瀏覽器不支援較新的 append() 方法。
• 所有現代網路瀏覽器，包括 Internet Explorer，都支援舊的 appendChild() 函式。

使用 insertAdjacentHTML() 新增 HTML 節點

appendChild() 甚至 append() 函式都能夠向給定的 HTML 節點新增新元素。這兩種方法都在最後一個子元素之後插入元素。它可能不適用於所有場景。特別是如果我們希望在 HTML 結構中的指定位置新增 HTML 節點。對於這種情況，可以使用 insertAdjacentHTML() 函式。它需要幾個引數，位置和該位置的文字。

• Position：insertAdjacentHTML 支援位置引數中的四個值。

  • beforebegin：在元素開始之前插入 HTML 節點。
  • afterbegin：顧名思義，此選項將元素插入到所選節點的開始標記之後，並將其放置在第一個子節點之前。
  • beforeend：這個類似於 appendChild()。顧名思義，beforeend 位置將元素放置在最後一個子元素之後。
  • afterend：指的是目標 HTML 節點標籤關閉後的位置。

• String：我們可以插入字串格式的 HTML 作為第二個引數。例如：<div> Hello World!</div>。
  一目瞭然，表示如下。

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

讓我們看一下與我們討論的 appendChild() 和 JavaScript 的 insertAdjacentHTML() 函式相同的例子。

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

在此程式碼中，我們在引數中使用了 beforeend 選項將動態建立的輸入元素附加到 address div 的末尾。你可以嘗試使用其他屬性，如 afterend、beforebegin 和 afterbegin 引數。