【问题标题】：Why isn't there a document.createHTMLNode()?为什么没有 document.createHTMLNode()？
【发布时间】：2011-11-24 14:34:30
【问题描述】：

我想在当前范围（W3C 范围）插入 html。

我想我必须使用方法 insertNode。它适用于文本。

例子：

var node = document.createTextNode("some text");
range.insertNode(node);

问题是我想插入 html（可能类似于“

test

some more text”）。并且没有 createHTMLNode()。

我尝试使用 createElement('div')，给它一个 id，并将 html 作为 innerHTML，然后在插入后尝试用它的 nodeValue 替换它，但它给了我 DOM 错误。

有没有办法做到这一点，而无需在我要插入的 html 周围添加额外的 html 元素？

【问题讨论】：

根据this 你可以插入DOM元素就好了。因此，请发布代码和错误消息，我们将帮助您调试它..
您能提供一个 jsFiddle 演示（或代码本身）吗？我没有太多使用范围，所以我不确定我是否可以重现你的情况....

标签： javascript dom createtextnode

【解决方案1】：

因为"<h1>test</h1>some more text" 由一个 HTML 元素和两段文本组成。它不是一个节点。

如果要插入 HTML，请使用 innerHTML。

有没有办法做到这一点，而无需在我要插入的 html 周围添加额外的 html 元素？

创建一个元素（不要将它添加到文档中）。设置它的innerHTML。然后通过循环 foo.childNodes 来移动它的所有子节点。

【讨论】：

啊。很好的答案。像魅力一样工作:) 谢谢！

【解决方案2】：

在某些浏览器（尤其是任何版本的 IE）中，Range 对象有一个原本非标准的 createContextualFragment()，这可能会有所帮助。现在it has been standardized 之后，IE 等浏览器的未来版本很可能会实现这一点。

这是一个例子：

var frag = range.createContextualFragment("<h1>test</h1>some more text");
range.insertNode(frag);

【讨论】：

【解决方案3】：

试试

function createHTMLNode(htmlCode, tooltip) {
    // create html node
    var htmlNode = document.createElement('span');
    htmlNode.innerHTML = htmlCode
    htmlNode.className = 'treehtml';
    htmlNode.setAttribute('title', tooltip);
    return htmlNode;
}

发件人：http://www.koders.com/javascript/fid21CDC3EB9772B0A50EA149866133F0269A1D37FA.aspx

【讨论】：

【解决方案4】：

只需使用 appendChild(element); 而不是 innerHTML ~~this 可以帮助你。如果你想在这里发表评论，我会给你一个例子~~。

【讨论】：

绝对正确，也是这样做的最佳方法。

【解决方案5】：

Range.insertNode() 方法在 Range 的开头插入一个节点。

var range = window.getSelection().getRangeAt(0);

var node = document.createElement('b');

node.innerHTML = 'bold text';

range.insertNode(node);

资源

https://developer.mozilla.org/en-US/docs/Web/API/range/insertNode

【讨论】：