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