Can insertBefore insert HTML tags?

Question

In the script below, i am inserting some code at the beginning of a DIV.

    var mydiv = document.getElementById("myDIV");
    var mycontent = document.createElement("p");
    mycontent.insertBefore(document.createTextNode("Hello <b>World</b><br><bR>"));
    mydiv.insertBefore(mycontent,mydiv.firstChild);

On my website, the code is inserted as text and the HTML formatting is ignored. Does anyone know how to have code inserted into a DIV using javascript?

if you got correct answer, please accept it ( click the checkmark under vote buttons) — Tom
– Tom, Commented Sep 18, 2012 at 11:21

Quentin · Accepted Answer · 2012-08-20 06:40:25Z

2

You cannot insert tags, you can insert only DOM nodes. DOM nodes can be text nodes or element nodes (or a few others that you almost certainly don't care about).

The distinction is important since you can insert <div></div> but not <div>.

To create an element:

var myElement = document.createElement('div');

Your particular example:

var myContent = document.createElement('p');
myContent.appendChild(document.createTextNode('Hello'));
var bold = document.createElement('b'); // Please don't use presentational elements in 2012
bold.appendChild(document.createTextNode('World');
myContent.appendChild(bold);
myContent.appendChild(document.createElement('br')); // Please don't use line breaks as margin/padding substitutes
myContent.appendChild(document.createElement('br')); 
mydiv.insertBefore(mycontent,mydiv.firstChild);

edited Aug 20, 2012 at 6:40

answered Aug 20, 2012 at 6:35

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett Zamir · Accepted Answer · 2012-08-20 06:38:58Z

1

You can use in conjunction with an element and innerHTML for a simple solution:

var mydiv = document.getElementById("myDIV");
var mycontent = document.createElement("p");
mycontent.innerHTML = 'Hello <b>World</b><br><bR>';
mydiv.insertBefore(mycontent, mydiv.firstChild);

answered Aug 20, 2012 at 6:38

Brett Zamir

14.4k7 gold badges57 silver badges85 bronze badges

Comments

Mihai Iorga · Accepted Answer · 2012-08-20 06:38:46Z

0

why not

var mydiv = document.getElementById("myDIV");
var mycontent = document.createElement("p");
mycontent.innerHTML = "Hello <b>World</b><br><bR>";
mydiv.insertBefore(mycontent,mydiv.firstChild);

answered Aug 20, 2012 at 6:38

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

Collectives™ on Stack Overflow

Can insertBefore insert HTML tags?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related