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

Question

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

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

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().

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.

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

According to [this](https://developer.mozilla.org/en/DOM/range.insertNode) you can insert DOM elements just fine. So please post code and error messages and we'll help you debug it.. — Shadow The GPT Wizard, Sep 25 '11 at 11:43
Could you provide a jsFiddle demo (or the code itself)? I haven't worked with ranges much so I'm not sure I could recreate your situation.... — Šime Vidas, Sep 25 '11 at 11:44

score 9 · Accepted Answer · answered Sep 25 '11 at 11:44

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

If you want to insert HTML then use innerHTML.

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

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

score 6 · Answer 2 · answered Sep 25 '11 at 18:24

In some browsers (notably not any version of IE), Range objects 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.

Here's an example:

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

score 4 · Answer 3 · answered Oct 19 '11 at 03:16

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

score 2 · Answer 4 · edited Jan 25 '20 at 10:52

2

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

edited Jan 25 '20 at 10:52

ashleedawg

20,365
9
72
105

answered Sep 25 '11 at 11:46

Ramzi Khahil

4,932
4
35
69

Absolutely, and the best method for doing this. – Rob Sep 25 '11 at 18:58

score 1 · Answer 5 · answered Jan 30 '19 at 17:05

The Range.insertNode() method inserts a node at the start of the 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

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

5 Answers5