jQuery .html（）与.append（）

可以说我有一个空的div：

<div id='myDiv'></div>

这是：

$('#myDiv').html("<div id='mySecondDiv'></div>");

与：

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

每当您将HTML字符串传递给jQuery的任何方法时，都会发生以下情况：

创建一个临时元素，我们称其为x。x innerHTML设置为您传递的HTML字符串。然后，jQuery将把每个产生的节点（即x childNodes）转移到新创建的文档片段中，然后将其缓存下一次。然后，它将片段的片段childNodes作为新的DOM集合返回。

请注意，它实际上要比这复杂得多，因为jQuery进行了大量的跨浏览器检查和各种其他优化。例如，如果您仅将传递<div></div>给jQuery()，则jQuery将采用快捷方式并简单地执行document.createElement('div')。

编辑：要查看jQuery执行的大量检查，请在此处，此处和此处查看。

innerHTML是一般的快的方法，虽然不要让支配你做什么，所有的时间。jQuery的方法并不element.innerHTML = ...像我提到的那么简单-正如我提到的，有很多检查和优化正在进行。

正确的技术在很大程度上取决于情况。如果要创建大量相同的元素，那么最后要做的就是创建一个巨大的循环，在每次迭代中创建一个新的jQuery对象。例如，使用jQuery创建100个div的最快方法：

jQuery(Array(101).join('<div></div>'));

还有一些可读性和维护性问题需要考虑。

这个：

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

......是很多难以维持比这个：

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

她们不一样。第一个替换 HTML而不先创建另一个jQuery对象。第二个为第二个div创建一个附加的jQuery包装器，然后将其附加到第一个div 。

一个jQuery包装器（每个示例）：

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

两个jQuery包装器（每个示例）：

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

您正在进行一些不同的用例。如果您想替换内容，那.html是个不错的选择，因为它相当于innerHTML = "..."。但是，如果只想附加内容，$()则不需要额外的包装器集。

如果div以后需要处理添加的包装，则仅使用两个包装。即使在这种情况下，您仍然可能只需要使用以下一种：

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

如果按.add您的意思.append，#myDiv则为空，则结果相同。

表现一样吗？不知道。

.html(x) 最终做与 .empty().append(x)

嗯，.html()使用.innerHTML它比DOM创建要快。

您可以通过以下方法获得第二种方法来达到相同的效果：

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca提到html()只插入HTML即可提高性能。

但是在某些情况下，您会选择第二种选择，请考虑：

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

.html() 将取代一切。

.append() 只会在末尾追加。

除了给定的答案，如果您有这样的情况：

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

这意味着如果要上传任何文件，则要自动添加一个以上的文件上传，上面提到的代码将不起作用，因为在文件上传后，将重新创建第一个文件上传元素，因此将从中擦除上传的文件。您应该改用.append（）：

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

这发生在我身上。jQuery版本：3.3。如果要遍历对象列表，并希望将每个对象添加为某些父dom元素的子对象，则.html和.append的行为将大不相同。.html最终只会将最后一个对象添加到父元素，而.append将所有列表对象添加为父元素的子对象。