从 HTML 字符串注入 HTML

假设您有一些作为字符串的 HTML

let string_of_html = `
  <div>Cool</div>
`;

它可能来自 API，或者您使用模板字面量或其他方式自己构建了它。

您可以使用 innerHTML 将其放入元素中，例如

document.body.innerHTML = string_of_html;

// Append it instead
document.body.innerHTML += string_of_html;

如果您使用 insertAdjacentHTML 函数，则可以更好地控制，因为您可以将新的 HTML 放置在四个不同的位置

<!-- beforebegin -->
<node>
  <!-- afterbegin -->
  text inside node
  <!-- beforeend -->
</node>
<!-- afterend -->

使用方法如下…

el.insertAdjacentHTML('beforebegin', string_of_html);
el.insertAdjacentHTML('afterbegin', string_of_html);
el.insertAdjacentHTML('beforeend', string_of_html);
el.insertAdjacentHTML('afterend', string_of_html);

在某些情况下，您可能希望在对新创建的 DOM 进行任何操作之前，先将其保留在 JavaScript 中。在这种情况下，您可以先解析您的字符串，例如

let dom = new DOMParser()
  .parseFromString(string_of_html, 'text/html');

这将为您提供一个完整的 DOM，因此您需要提取添加的子元素。假设它只有一个父元素，就像…

let dom = new DOMParser()
  .parseFromString(string_of_html, 'text/html');
let new_element = dom.body.firstElementChild;

现在您可以根据需要处理 new_element，我想在对其进行处理之前。

但是，这样做更直接

let new_element = document.createRange()
  .createContextualFragment(string_of_html);

您将直接获得一个文档片段作为元素，以便根据需要进行附加或其他操作。此方法值得注意的是，它实际上会执行它找到的 <script>，这既有用又危险。

所有这些都存在相当多的细微差别。例如，HTML 必须有效。格式错误的 HTML 根本无法工作。格式错误也可能让您措手不及，例如将 <tr> 放入 <table> 中将失败，因为它缺少 <tbody>。

Koen Schaft 撰写了 “从 HTML 字符串创建 DOM 节点”，其中涵盖了我们在这里讨论的内容，但更详细，并包含更多注意事项。