JavaScript 将数据附加到 Div

向现有 div 附加数据时，先选中该元素，再根据新值是纯文本还是可信 HTML 选择方法。对于普通文本，textContent 或文本节点不会触发 HTML 解析。只有确实需要添加标记时，才使用 insertAdjacentHTML。以下示例假设脚本运行前，页面中已有 <div id="myDiv"> 元素。（JavaScript）

根据要添加的内容选择方法

对于用户输入和其他纯文本，请使用 textContent 或 createTextNode。这些 API 会创建文本，不会将 < 等字符解释为标记。若要添加带有文本或属性的新元素，请创建该元素，再将它作为节点附加。

当你有自己控制、且需要解析为元素的 HTML 字符串时，请使用 insertAdjacentHTML。不要用 innerHTML += 向已有内容的元素追加内容：读取并重新设置 innerHTML 会重新解析其内容并替换后代节点。被替换的后代会从新树中移除，但已有的 JavaScript 引用仍指向这些已脱离文档树的节点。事件侦听器仍附加在旧节点上，不会转移到替换后的节点。应根据内容类型选择方法，而不是依据笼统的速度排名。

使用 textContent 或 appendChild 附加纯文本

此示例会创建一个段落，设置其文本，然后将新节点附加到选中的 div。如果页面中没有匹配的元素，getElementById 会返回 null，因此使用结果前应先检查它。

请在包含目标元素的页面中运行此示例。示例会添加一个段落，其显示文本 A new paragraph. 保持英文：

本节中的代码以及显示的标签或输出仍为英文。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

数据包未提供此浏览器示例的执行记录。目标元素存在时，示例会添加一个内容为文本的段落。如果不需要包装元素，也可以直接用 document.createTextNode("More text") 创建文本节点，再将该节点传给 appendChild。

使用 insertAdjacentHTML 附加 HTML

在目标元素上调用 insertAdjacentHTML，并传入插入位置和 HTML 字符串。beforeend 会将解析后的节点放在 div 内部、现有子节点之后。其他位置包括 afterbegin（在元素内部、现有子节点之前）、beforebegin（紧邻元素外部、位于元素之前）以及 afterend（紧邻元素外部、位于元素之后）。

本示例会添加一个段落，其显示文本 A new paragraph. 保持英文：

本节中的代码以及显示的标签或输出仍为英文。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

数据包未提供此浏览器示例的执行记录。只有在确实需要将传入字符串解析为 HTML 时才使用此方法；它不会清理不可信输入。若要在 div 内部末尾添加新标记，应使用 beforeend 这个位置。

谨慎使用 innerHTML

innerHTML 会以字符串形式提供元素的标记内容。将字符串拼接后再赋值回去看起来像是在追加，但浏览器实际会解析内容并替换该元素的后代节点。已有的后代节点会从替换后的树中脱离；指向它们的引用仍然指向这些旧节点，它们的事件侦听器也仍附加在旧节点上，不会作用于替换后的节点。不要将不可信数据用于 innerHTML，因为浏览器会把该值当作标记处理，可能造成跨站脚本（XSS）漏洞。

本示例用 A new paragraph. 作为显示文本，该文本保持英文：

本节中的代码以及显示的标签或输出仍为英文。

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

数据包未提供此浏览器示例的执行记录。它展示了重新赋值的行为，但不是追加内容时保留现有子节点的首选方式。对于动态文本，请创建一个元素，设置其 textContent，然后附加该元素。

使用 jQuery 附加内容

如果项目已经使用 jQuery，.append() 会将内容添加到每个匹配元素的末尾。传给 .append() 的字符串会按 HTML 解析，因此不要传入不可信字符串。对于纯文本，请创建 DOM 节点并附加该节点，或者使用上文介绍的原生 textContent 方法。

本示例会添加一个段落；代码中的显示文本 A new paragraph. 保持英文：

本节中的代码以及显示的标签或输出仍为英文。

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

数据包未提供此浏览器示例的执行记录。运行它需要先加载 jQuery，并确保存在匹配的元素；如果缺少其中任一条件，带有检查保护的代码就不会执行操作。

检查结果并避免常见错误

请确认选择器匹配的是目标元素，并确保元素可用后再运行脚本，例如将脚本放在 div 后面，或等待文档加载完成。getElementById("myDiv") 会按 ID 选择元素；querySelector("#myDiv") 是功能等效的选择器用法。调用结果上的方法前，应先处理未找到匹配元素的情况。

对于纯文本，优先使用 textContent 或文本节点，以确保字符仍作为文本处理。对于标记，若要在目标元素内部末尾插入，请使用 insertAdjacentHTML("beforeend", html)，并确保 HTML 可信，或已通过合适的策略清理。不要把 innerHTML += 当作能保留节点的追加操作。只有当项目已引入 jQuery，且内容确实需要按 HTML 解析时，才选择 jQuery 的 .append()。这些方法用于附加内容；删除元素属于另一项 DOM 操作。