10

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

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

例子：

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

问题是我想插入 html（可能类似于“<h1>test</h1>some more text”）。并且没有 createHTMLNode()。

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

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

4

5 回答 5

9

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

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

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

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

于 2011-09-25T11:44:16.907 回答
5

在某些浏览器中（尤其不是任何版本的 IE），对象具有可能有所帮助Range的原始非标准。createContextualFragment()IE 等浏览器的未来版本很可能会实现这一点，因为它已经标准化。

这是一个例子：

var frag = range.createContextualFragment("<h1>test</h1>some more text");
range.insertNode(frag);
于 2011-09-25T18:24:35.403 回答
2

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

于 2011-09-25T11:46:06.657 回答
2

尝试

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

于 2011-10-19T03:16:03.347 回答
0

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

于 2019-01-30T17:05:29.963 回答