javascript - 在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 的子节点，而不是片段本身

不幸的是，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 );