如何将 HTML 字符串附加到 DocumentFragment？答案

【问题标题】：How to append an HTML string to a DocumentFragment?如何将 HTML 字符串附加到 DocumentFragment？
【发布时间】：2013-11-24 15:06:17
【问题描述】：

我正在向 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 来完成吗？

【问题讨论】：

你可以创建一个div标签并使用innerHTML。
不能，因为它需要运行我的处理程序，它只创建 documentFragments
让您的处理程序在内部创建一个 div，将字符串分配给 innerHTML，然后将创建的节点移动到片段。
嗯。如果可行，让我试试。
创建div，追加div，使用outerHTML。

标签： javascript html string appendchild createtextnode

【解决方案1】：

创建一个临时 div，在 innerHTML 中插入文本，然后将 div 的所有节点移动到片段中。由于一个元素一次只能在一个地方，它会自动从临时 div-tag 中删除。

var frag = document.createDocumentFragment();

var div = document.createElement('div');
div.innerHTML = '<a href="http://stackoverflow.com/">Stack overflow</a>';
while (div.firstChild) frag.appendChild(div.firstChild);

【讨论】：

【解决方案2】：

document.createRange().createContextualFragment("<span>Hello World!</span>");

它返回一个 DocumentFragment。

支持 IE >= 9

编辑：

最近的版本 Safari 似乎以捷径失败，这里有点长但有效的方式：

var range = document.createRange();
range.selectNode(document.body); // Select the body cause there is always one (documentElement fail...)

var fragment = range.createContextualFragment("<span>Hello World!</span>");

【讨论】：

小心！未标准化。

【解决方案3】：

这可能有效：

var foo = document.createDocumentFragment();
var someText = 'Hello <a href="www.world.com">World</a>';
var item = document.createElement('span');
item.innerHTML = someText
foo.appendChild(item);
document.body.appendChild(foo);

【讨论】：