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

Nithin Krishnan 2023年1月30日 2021年10月2日
  1. 使用 InnerHTML 新增新 HTML 節點的缺點
  2. 新增 HTML 內容而不替換 DOM 元素
  3. 在 JavaScript 中使用 appendChild() 附加 HTML 內容
  4. 使用 insertAdjacentHTML() 新增 HTML 節點
使用 JavaScript 將 HTML 內容附加到現有的 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() 方法將 typeplaceholder 屬性設定為建立的 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() 函式。它需要幾個引數,位置和該位置的文字。

  • PositioninsertAdjacentHTML 支援位置引數中的四個值。

    • 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 的末尾。你可以嘗試使用其他屬性,如 afterendbeforebeginafterbegin 引數。