为什么没有 document.createHTMLNode() ？

Question

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

我想我必须使用 insertNode 方法。它与文本配合得很好。

示例：

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

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

测试

更多文本”）。并且没有createHTMLNode()。

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

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

Answer 1

因为 "

test

some more text" 由一个 HTML 元素和两段文本组成。它不是节点。

如果您想插入 HTML，请使用 innerHTML。

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

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

Answer 2

在某些浏览器（尤其是任何版本的 IE）中，Range 对象最初具有非标准的 createContextualFragment() 可能会有所帮助。未来版本的浏览器（例如 IE）很可能会实现这一点，因为

这是一个例子：

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

Answer 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

Answer 4

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

Answer 5

不用innerHTML，只需使用appendChild(element); 这可能对您有帮助。
如果你想在这里发表评论，我会给你一个例子。