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

convert innerHTML string to DOM structure in javascript

本文关键字：DOM 结构 转换 字符串 javascript 中将 innerHTML      更新时间：2023-09-26

我想将以下字符串转换为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中不可用。

我该怎么办？谢谢

试试这个：

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

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

div.insertAdjacentHTML( 'beforeend', str );

Esailija的答案在大多数情况下都可以跨浏览器工作，并且是我目前总体上更喜欢的。为此任务设计的另一个选项是Range的createContextualFragment()方法（另请参阅 DOM 解析和序列化规范）。这个想法是，它将为指定的 HTML 字符串创建一个DocumentFragment，该字符串与文档中由 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 );

好的，我只是将 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;
    }
相关文章：