您应该使用innerHTML向DOM添加HTML还是通过逐一创建新元素来添加HTML？

Question

有两种方法可以将 HTML 代码添加到 DOM，但我不知道最好的方法是什么。

第一种方法

第一种方法很简单，我可以简单地使用

$('[code here]').appendTo(element);

添加 HTML 代码（使用 jQuery），这很像

element.innerHTML = [code here];

第二种方法

另一种方法是逐个创建所有元素，例如：

// New div-element
var div = $('<div/>', {
              id: 'someID',
              class: 'someClassname'
          });

// New p-element that appends to the previous div-element
$('<p/>', {
    class: 'anotherClassname',
    text: 'Some textnode',
}).appendTo(div);

此方法使用了

document.createElement

和

element.setAttribute

等核心功能。

什么时候应该使用第一种方法，什么时候应该使用第二种方法？方法二比方法一快吗？

编辑 - 速度测试的结果

我做了三个速度测试，代码如下：

$(document).ready(function(){
    // jQuery method - Above mentioned as the second method
    $('#test_one').click(function(){
        startTimer();
        var inhere = $('#inhere');
        for(i=0; i<1000; i++){
            $(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' + i}));
        }
        endTimer();
        return false;
    });

    // I thought this was much like the jQuery method, but it was not, as mentioned in the comments
    $('#test_two').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere');
        for(i=0; i<1000; i++){
            var el = document.createElement('p')
            el.setAttribute('class', 'anotherClassname' + i);
            el.appendChild(document.createTextNode('number' + i));
            inhere.appendChild(el);
        }
        endTimer();
        return false;
    });

    // This is the innerHTML method
    $('#test_three').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere'), el;
        for(i=0; i<1000; i++){
            el += '<p class="anotherClassname' + i + '">number' + i + '</p>';
        }                
        inhere.innerHTML = el;
        endTimer();
        return false;
    });
});

这给出了以下真正令人惊讶的结果

	测试一	测试二	测试三
铬5	~125ms	~10ms	~15ms
火狐3.6	~365ms	~35ms	~23ms
IE 8	~828ms	~125ms	~15ms

总而言之，innerHTML 方法似乎是最快的方法，并且在许多情况下是最具可读性的方法。

Answer 1

我指出一篇过时的文章，以便人们自行测试。 实际上，DOM 方法在我所有的机器上都击败了innerHTML，所以这是我更喜欢的。然而，在撰写本文时，innerHTML 的平均速度更快。目前，只有在巨大的数据集中才能看到显着的差异。

Answer 2

实际上，这两种方法都没有使用

innerHTML

，在这两种情况下 jQuery 都会将 HTML 转换为 DOM 节点。 来自 jquery-1.3.2.js：

// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
    var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
    if ( match )
        return [ context.createElement( match[1] ) ];
}

// ... some more code (shortened so nobody falls asleep) ...

// Convert html string into DOM nodes
if ( typeof elem === "string" ) {
    // Fix "XHTML"-style tags in all browsers
    elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag){
        return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
            all :
            front + "></" + tag + ">";
    });
    // etc...
}

一般来说，使用innerHTML比操作DOM慢，因为它调用HTML解析器（无论如何它都会将HTML解析为DOM）。

Answer 3

如果我稍后要在代码中重复使用

div

，我将构建它并将其放入

var

中，通常带有

$

前缀，这样我就知道它是一个 jQuery 对象。如果这是一次性的事情，我只会做：

 $('body').append(the stuff)