如何从 HTML 字符串创建 DOM 元素（多种方法）

当我们需要创建简单的动态 HTML DOM 元素时，我们可以使用 HTML 字符串模板。在 JavaScript 中有很多不同的方法可以实现这一点，但我们可能有一些考虑。

---

内部HTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

这是最常见的方法之一。将HTML字符串插入到容器元素的innerHTML中，然后访问生成的DOM节点。

但是，它只能处理有效的 HTML 节点，即标准 HTML 结构中合法的元素。例如，如果您尝试插入

；元素放入

中，则不会创建节点。

此外，该方法不会执行HTML字符串中的任何脚本，这在处理不受信任的内容时更加安全。

innerHTML + 模板元素

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

使用的优点标签的优点是它没有内容限制，可以包含任何类型的 HTML 结构，包括与表格相关的元素，如

等。和。

插入相邻HTML

const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;

该方法与innerHTML类似，只能处理有效的HTML节点。它也不会执行脚本。

DOM解析器

const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;

此方法通过创建完整的 HTML 文档来解析字符串，然后从文档中提取节点。这意味着它比其他解决方案相对慢，不建议使用。

它只能处理有效的 HTML 节点，不会执行脚本。

Range.createContextualFragment

const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;

这个方法可能是最简单的。默认情况下它也只能处理有效的 HTML 节点。不过，我们可以设置上下文来避免这种情况。

请注意，它会执行 HTML 字符串中的脚本，因此在处理不受信任的内容时要特别小心，例如使用 DOMPurify 等清理器。

结论

针对不同的情况，您可能需要选择最适合您的方法。

如果您觉得我的内容有帮助，请考虑订阅。我每天都会发送一份包含最新 Web 开发更新的时事通讯。感谢您的支持！

以上是如何从 HTML 字符串创建 DOM 元素（多种方法）的详细内容。更多信息请关注PHP中文网其他相关文章！