which one is a better way to create html elements using javascript

Asked Mar 07 '16 at 17:08

Active Mar 07 '16 at 17:09

Viewed 49 times

Which is the more professional way. I like the first one better because you can pass in the class, id, name etc in one line.

var button = "<button type='button' id='mybutton'></button>";
document.body.innerHTML+= button;

var button = document.createElement("BUTTON");
document.body.appendChild(button);

edited Mar 07 '16 at 17:09

asked Mar 07 '16 at 17:08

Dark Night

2

The second, it's the only one which works. – Teemu Mar 07 '16 at 17:08
sorry editted the firs one. how about now? – Dark Night Mar 07 '16 at 17:09
They're just different, there's not one that's "more professional". When you need a highly degree of control you need to manipulate nodes individually, when you just want to insert large hunks of HTML then `innerHTML` performs better. – Álvaro González Mar 07 '16 at 17:10
This question is either too broad or primarily opinion based. There are a lot of factors in choosing one method over the other. – zzzzBov Mar 07 '16 at 17:11
Get more detail here http://www.w3schools.com/jsref/met_document_createelement.asp – Santosh Ram Kunjir Mar 07 '16 at 17:11
Now the first will re-create and override all existing HTML in `body`, which definitely is not preferred. – Teemu Mar 07 '16 at 17:13
1

And first will also disturb the DOM tree and events attached to those elements using JS event binding.. – Rayon Mar 07 '16 at 17:14

0 Answers0