插入内联HTML或创建新元素是否更快？

Question

I have a question, I use prototype, but maybe this question could apply to native javascript as well.

Which would be generally faster and more efficient to run:

$(divElement).insert('<div>Hello</div');

or

$(divElement).insert(new Element(div).insert('Hello'));

How about creating the element seperatly and assigning it to a variable like this:

var helloDiv = '<div>Hello</div>';
$(divElement).insert(helloDiv);

or

var helloDiv = new Element('div').insert('Hello');
$(divElement).insert(helloDiv);

Is creating inline html faster than creating an element and then inserting it? This information could be useful especially for constructing something like tables.

Thank you and appreciate your help.

Answer 1

innerHTM L is faster than appendChild

The advantage of appendChild is that it actually updates the DOM properly in all browsers so that you can actually read back and update the tags you added.

Using innerHTML does not update the DOM in all browsers and so the content added that way may not be able to be updated after it is added (if you need to do that).

Answer 2

它取决于浏览器，对于ie和firefox来说绝对正确，但在chrome上似乎较慢： http : //jsperf.com/innerhtml-vs-createelement-test 。