Insert html elements to body using javascript

Question

I have checkbox on the page. I am wrapping that checkbox in a div and insert label after checkbox using javascript. Now I want to add all these elements on the body but it does not work. here is my code. I use

        document.body.innerHTML = wrapper;

in order to add those elements to body but it does not work. How can I make it work?

I don't understand, you're already using `appendChild()` on the wrapper. What makes you think appending to the `` element should be done differently? — Frédéric Hamidi, Feb 16 '14 at 13:21
I want to show that checkbox. That wrapper is created using javascript which means it is not yet on the body. After insert two new elements inside wrapper now I want to show it to users to see. How can I show it? — Om3ga, Feb 16 '14 at 13:23

score 2 · Answer 1 · answered Feb 16 '14 at 13:26

You only have to apply appendChild() to the <body> element, just like you're already doing with the wrapper element:

document.body.appendChild(wrapper);

innerHTML is a string property that is supposed to be assigned raw HTML markup, not DOM elements.

You will find an updated fiddle here.

score 1 · Accepted Answer · answered Feb 16 '14 at 13:26

1

Instead use document.body.innerHTML = wrapper; please use appendChild:

wrapper.appendChild(c[i]);
wrapper.appendChild(label);
document.body.appendChild(wrapper);

See this.

answered Feb 16 '14 at 13:26

Now when I check the checkbox it doesnt get checked. Why? – Om3ga Feb 16 '14 at 13:29
Please see this http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Feb 16 '14 at 13:35

Insert html elements to body using javascript

2 Answers2