Geek Answers Handbook

Create / append node vs innerHTML

Does anyone have serious reasons to use one over the other? As far as I can tell, create / append node just prevents you from creating invalid code, and innerHTML allows you to enter multiple nodes at once.

Given that I need to insert multiple tags, it seems to make sense to use innerHTML. Somebody else?

+5
source share
7 answers

This is always a controversial argument, in part because the origin is innerHTMLsomewhat questionable in terms of standards. I think the QuirksMode article is still relevant, but I would like to see it updated. Perhaps ppk contact about updating them, although I'm sure he is busy. We could benefit from testing the performance assumptions we make in web development. In the end, claims require hard data to prove, otherwise it's really easy to say.

In any case, I did some searching and found interesting articles related to this discussion. I still don’t remember hearing about DocumentFragments, they are really interesting.

+8

, , , innerHTML.

? . , , . , , node, .

, . innerHTML, , , ( , , / JavaScript ), innerHTML . , , , -appendChild.

( : ?), DocumentFragment, , . . , innerHTML DocumentFragment.

Range, HTML, , , . , - append-html IE range.pasteHTML W3 range.extractContents. - ?

, create/append node

, . HTML, , :

element.innerHTML= '<a href="'+url+'">'+title+'</a>';

, , .

, , , . :

element.innerHTML= '<table>'+'<tr><td>X</td><td><a href="#">go</a></td></tr>'.repeated(urls.length)+'</table>';
for (var i= 0; i<urls.length; i++) {
    var row= element.firstChild.rows[i];
    row.cells[0].firstChild.data= urls[i];
    row.cells[1].firstChild.href= urls[i];
}

(string.repeated JavaScript, .)

+4

, !!

:

var target = document.getElementById('whatever');
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a;
target.appendChild(newnode) }

:

var target = document.createElement('span')
for (a = 0; a<10000; a++) { 
var newnode = document.createElement('div'); 
newnode.textContent = a;
target.appendChild(newnode) }
document.getElementById('whatever').appendChild(target);

node node, , .

"" node, , , node . !

+3

, , innerHTML , MSIE: http://www.quirksmode.org/dom/innerhtml.html

, " Microsoft" / "OO".

+1

, , DOM innerHTML, HTML.

0

.

DOM html / .

0

The difference in creating nodes through the DOM is standardized, but innerHTML is simply a de facto standard. I read that innerHTML can be faster.

An even better alternative is to use the jQuery library to manipulate the DOM. It will take care of most incompatibilities between browsers and will be more readable than using DOM methods.

0
source

More articles:


All Articles