Question

假设我有一个空div：

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

这是：

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

与：

相同

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

Answer 1

无论何时将HTML字符串传递给任何jQuery方法，都会发生这种情况：

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

请注意，它实际上要复杂得多，因为jQuery会进行一系列跨浏览器检查和各种其他优化。例如。如果您只将<div></div>传递给jQuery()，jQuery将采用快捷方式，只需执行document.createElement('div')。

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

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 });

Answer 2

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

一个jQuery Wrapper （每个例子）：

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

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

两个jQuery Wrappers （每个示例）：

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();

Answer 3

如果.add表示.append，则#myDiv为空时结果相同。

性能是一样的吗？不知道。

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

做同样的事情

Answer 4

好吧，.html()使用的.innerHTML比DOM更快。

Answer 5

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

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);

Answer 6

除了给定的答案，如果你有这样的话：

<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;
        }
    }

Answer 7

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

Answer 8

HTML将替换所有内容。

Append只会在末尾附加。

jquery .html（）vs .append（）

8 个答案: