2

我想将以下字符串转换为 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()是最好的方法，因为当将 a 附加fragment到节点时，它只是 append fragment's childNodes，而不是fragment itself

不幸的innerHTML是，方法在fragment.

我该怎么办？谢谢

4

4 回答 4

8

试试这个：

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 );
于 2012-04-22T18:57:03.413 回答
4

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

div.insertAdjacentHTML( 'beforeend', str );
于 2012-07-07T10:30:45.093 回答
1

Esailija 的答案可以跨浏览器使用，并且在大多数情况下都是我现在最喜欢的。专门为此任务设计的另一个选项是createContextualFragment()（Range另请参阅DOM Parsing and Serialization 规范）的方法。这个想法是，它将DocumentFragment为指定的 HTML 字符串创建一个与 Range 开头表示的文档中的位置相关的字符串。不幸的是，这种方法在 IE <= 9 中不受支持，尽管IE 10 会支持它。

这是一个例子。假设您打算在正文的末尾插入片段：

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 );
于 2012-04-22T22:26:06.763 回答
0

好的，为了方便起见，我只是将 Tim 的答案和 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;

    }
于 2012-04-23T08:18:15.817 回答