javascript - 如何将 HTML 字符串附加到 DocumentFragment？

Question

我正在像这样向 documentFragment 添加文本节点:

var foo = document.createDocumentFragment();
var someText = "Hello World";
foo.appendChild(document.createTextNode(someText));

这工作正常，但有时我会收到“文本”，其中包含如下内联链接:

var someOtherText = "Hello <a href='www.world.com'>World</a>";

在我的处理程序中，它被转换为硬编码文本而不是链接。

问题:
如何将上面的 HTML 字符串附加到 documentFragment 中？如果我不使用 textNodes 可以使用 appendChild 来完成吗？

Answer 1

创建一个 template -element，添加带有 .innerHTML 的文本，并得到一个带有 content-property 的 doumentFragment:

function stringToFragment(string) {
  const temp = document.createElement('template');
  temp.innerHTML = string;
  return temp.content;
}

现在您可以从字符串创建 documentFragment，甚至可以将 documentFragment 附加到 documentFragment:

const frag = stringToFragment('<div>Hello</div>');
frag.append(stringToFragment('<div>Stackoverflow</div>'));