javascript 为什么没有 document.createHTMLNode()?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7545267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 00:29:48  来源:igfitidea点击:

Why isn't there a document.createHTMLNode()?

javascriptdomcreatetextnode

提问by Martin

I want to insert html at the current range (a W3C Range).

我想在当前范围(W3C 范围)插入 html。

I guess i have to use the method insertNode. And it works great with text.

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

Example:

例子:

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

The problem is that i want to insert html (might be something like "<h1>test</h1>some more text"). And there is no createHTMLNode().

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

I've tried to use createElement('div'), give it an id, and the html as innerHTML and then trying to replace it with it's nodeValue after inserting it but it gives me DOM Errors.

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

Is there a way to do this without getting an extra html-element around the html i want to insert?

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

采纳答案by Quentin

Because "<h1>test</h1>some more text"consists of an HTML element and two pieces of text. It isn't anode.

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

If you want to insert HTML then use innerHTML.

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

Is there a way to do this without getting an extra html-element around the html i want to insert?

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

Create an element (don't add it to the document). Set its innerHTML. Then move all its child nodes by looping over foo.childNodes.

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

回答by Tim Down

In some browsers (notably not any version of IE), Rangeobjects have an originally non-standard createContextualFragment()that may help. It's likely that future versions of browsers such as IE will implement this now that it has been standardized.

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

Here's an example:

下面是一个例子:

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

回答by Tom

Try

尝试

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

From: http://www.koders.com/javascript/fid21CDC3EB9772B0A50EA149866133F0269A1D37FA.aspx

来自:http: //www.koders.com/javascript/fid21CDC3EB9772B0A50EA149866133F0269A1D37FA.aspx

回答by Ramzi Khahil

Instead of innerHTML just use appendChild(element); thismay help you. If you want comment here, and I will give you an example.

使用 appendChild(element) 代替innerHTML; 可能对你有帮助。如果你想在这里发表评论,我会给你一个例子.

回答by RafaSashi

The Range.insertNode() method inserts a node at the start of the Range.

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

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

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

node.innerHTML = 'bold text';

range.insertNode(node); 

Resources

资源

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

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