Simple createElement issue in Javascript

Question

I thought the following script will create div element but I got nothing output in my html. Could anyone help me out? Thanks a lot.

var div=document.createElement('div');
div.setAttribute('id','testttttttt');

div.innerHTML='fjsoidfjiosdjfoi';

Thanks for all the help. This is what I got when using Jquery too much and forget about all the basis in javascript...lol +1 all. — FlyingCat
– FlyingCat, Commented Jul 5, 2012 at 17:48

user1106925 · Accepted Answer · 2012-07-05 17:45:37Z

4

You get nothing in your HTML, because your HTML is on the server.

You get nothing in the DOM, because you haven't added the element to the DOM.

document.body.appendChild(div);

answered Jul 5, 2012 at 17:45

user1106925

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

Comments

Danilo Valente · Accepted Answer · 2012-07-05 17:52:31Z

3

You have to use the appendChild method in the end:

var div=document.createElement('div');
div.setAttribute('id','testttttttt');
div.innerHTML='fjsoidfjiosdjfoi';
document.body.appendChild(div);

Otherwise, the created element will exist, but won't appear in your page.

Also, you have to be sure that document.body exists, otherwise, it will throw an error (if this script is going to be executed when loaded, put it inside an onload event).

PS: You can also append to any other DOM elements:

document.getElementById('myDivHolder').appendChild(div);

JSFiddle example: http://jsfiddle.net/AkXTr/

edited Jul 5, 2012 at 17:52

answered Jul 5, 2012 at 17:45

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Comments

dlev · Accepted Answer · 2012-07-05 17:45:17Z

3

In addition to creating the element, you must insert it into the DOM. You can use the appendChild() method to add it to the end of a given parent element:

var div=document.createElement('div');
div.setAttribute('id','testttttttt');

div.innerHTML='fjsoidfjiosdjfoi';

// Now, append it
document.getElementById('someOtherElement').appendChild(div);

answered Jul 5, 2012 at 17:45

dlev

48.7k5 gold badges127 silver badges133 bronze badges

Comments

Ry- · Accepted Answer · 2012-07-05 17:45:29Z

2

You'll actually need to append it to something; I'm guessing document.body will do.

var div = document.createElement('div');
div.id = 'testttttttt';
div.innerHTML = 'fjsoidfjiosdjfoi';

document.body.appendChild(div);

Make sure you do this when document.body actually exists, though, i.e. in a load event or inside the body element itself.

answered Jul 5, 2012 at 17:45

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Comments

Michael Besteck · Accepted Answer · 2012-07-05 17:50:24Z

1

You created the div correctly, just it hangs in nowhere. It needs to be inserted into the document, e.g. like

        var div=document.createElement('div');
        div.setAttribute('id','testttttttt');
        div.innerHTML='fjsoidfjiosdjfoi';
        document.getElementsByTagName("body")[0].appendChild(div);

answered Jul 5, 2012 at 17:50

Michael Besteck

2,41918 silver badges11 bronze badges

Collectives™ on Stack Overflow

Simple createElement issue in Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related