从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);

在某些情况下，您可能想在使用JavaScript之前仍使用DOM创建新创建的DOM。 在这种情况下，您可以先解析您的字符串，例如：

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> 。

公园在杆写入“创建从HTML字符串DOM节点” ，涵盖了我们这里，但在更多的细节和更多的陷阱中。

翻译自: https://css-tricks.com/snippets/javascript/inject-html-from-a-string-of-html/