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

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