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

oknwwptz 于 2022-12-28 发布在 Java

关注(0)|答案(3)|浏览(156)

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

JavaScript

来源：https://stackoverflow.com/questions/19929641/how-to-append-an-html-string-to-a-documentfragment

3条答案

按热度按时间

luaexgnf1#

创建一个template-元素，添加带有.innerHTML的文本，并获得带有content-属性的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>'));

赞(0）回复(0）举报 2022-12-28

velaa5lx2#

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

赞(0）回复(0）举报 2022-12-28

t0ybt7op3#

这可能有效：

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

赞(0）回复(0）举报 2022-12-28

我来回答

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

3条答案

相关问题

热门标签

最新问答