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

javascript dom createtextnode
Martin picture Martin · Sep 25, 2011 · Viewed 14.5k times · Source

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?

Answer

Quentin picture Quentin · Sep 25, 2011

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.

Related questions

TextNode or textContent?

What's the advantage of creating a TextNode and appending it to an HTML element over setting directly its textContent? Let's say I have a span. var span = document.getElementById('my-span'); And I want to change its text. What's the advantage …

Read More
How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More