Question

我想将以下字符串转换为DOM结构。

text node <div>div node</div>text node<p>paraph node</p> text node

一种方法是，

mydiv = document.createElement('div');
mydiv.innerHTML = 'text node <div>div node</div>text node<p>paraph node</p> text node';

在这种方法中，DOM结构被另一个div包裹，这不是我想要的。

搜索和阅读后，我发现document.createDocumentFragment()是最好的方法，因为在向节点追加fragment时，它只会附加fragment's childNodes，而不是fragment itself

遗憾的是，innerHTML无法使用fragment方法。

我该怎么办？感谢

Answer 1

试试这个：

var frag = document.createDocumentFragment();
var mydiv = document.createElement('div');
mydiv.innerHTML = 'text node <div>div node</div>text node<p>paraph node</p> text node';


while( mydiv.firstChild ) {
    frag.appendChild( mydiv.firstChild );
}

document.body.appendChild( frag );

Answer 2

我尝试了这个页面上的所有解决方案，但没有一个能够适用于我的情况（一个更复杂的HTML字符串）。我最后使用 insertAdjacentHTML 这个非常简单的方法，我在这里找到了：https://stackoverflow.com/a/7327125/388412

div.insertAdjacentHTML( 'beforeend', str );

Answer 3

Esailija的答案将适用于跨浏览器，在大多数情况下，这是我现在所喜欢的。为此任务设计的另一个选项是Range的{{3}}方法（另请参阅createContextualFragment()）。我们的想法是，它将为指定的HTML字符串创建一个DocumentFragment，该字符串与Range开头所代表的文档中的位置相关。遗憾的是，IE＆lt; = 9不支持此方法，尽管DOM Parsing and Serialization spec。

这是一个例子。我们假设您计划将片段插入正文的末尾：

var html = "text node <div>div node</div>text node<p>paraph node</p> text node";
var range = document.createRange();
range.selectNodeContents(document.body);
range.collapse(false);
var frag = range.createContextualFragment(html);

document.body.appendChild( frag );

Answer 4

好的，我只是将蒂姆的答案和Esailija的答案结合到一个单一的功能上以便于实现。

   function createDocumentFragment (inMarkup) {

        var range, fragment, dummy, elem;

        if (document.createRange && (range = document.createRange())
                && range.selectNodeContents
                && range.createContextualFragment) {

            range.collapse(false);

            range.selectNodeContents(document.body);

            fragment = range.createContextualFragment(inMarkup);

        } else {

            dummy = document.createElement('div');

            fragment = document.createDocumentFragment();

            dummy.innerHTML = inMarkup;

            while((elem = dummy.firstChild)) {

                fragment.appendChild(elem);

            }

        }

        return fragment;

    }

在javascript中将innerHTML字符串转换为DOM结构

4 个答案: