使用 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 参数。