jQuery .html() 与 .append()

Posted 2023-05-09

【中文标题】jQuery .html() 与 .append()

【英文标题】：jQuery .html() vs .append()

【发布时间】：2011-03-02 05:10:16

【问题描述】：

假设我有一个空的 div：

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

这是：

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

同：

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

【问题讨论】：

不，第二个没有id，所以不会输出相同的文本。

.html 在你第一次运行之后要快得多。第一次运行它可能需要第二次左右。

【参考方案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
);

【讨论】：

jQuery(Array(101).join(''));

只是想添加一个数据点。对将大量（10K+） 加载到 的应用程序进行一些性能测试，并通过切换 .append( GiantListHTMLAsASingleString) 到 .html(giantListHTMLAsASingleString)。如果您已经在使用“加入”技巧或在列表中建立一个大的 html 字符串，那么这两种方法肯定存在性能差异。

@tacone 因为连接“胶水”应用于在数组元素之间。 101 将应用 100 种胶水，就像连接 3 个元素将使用 2 种胶水一样：EL-glue-EL-glue-EL。在 James 的示例中，数组元素是“空的”，因此连接 N 个空元素会导致 N-1 个连续的粘连。

对于那些对上面使用的 jquery 语法的参考以及允许的内容感兴趣的人，请参阅api.jquery.com/jquery/#jQuery-html-attributes。

有一个很大的不同之处在于它会丢失任何附加到doms的数据。

【参考方案2】：

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

一个 jQuery Wrapper（每个例子）：

$("#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();

【讨论】：

你看到了吗？字符串连接已经在这里出错（未转义的引号）。看我的帖子：P

【参考方案3】：

如果.add 是指.append，那么如果#myDiv 为空，则结果相同。

性能一样吗？不知道。

.html(x) 最终与.empty().append(x) 做同样的事情

【讨论】：

另外，第一个显然有一个 mySecondDiv 的 id，而另一个没有 id。并且语法需要是使用双引号的 .html("") 才能使用单引号。

【参考方案4】：

好吧，.html() 使用 .innerHTML，这比创建 DOM 快。

【参考方案5】：

.html() 将替换所有内容。

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

【参考方案6】：

你可以通过第二种方法达到同样的效果：

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

Luca 提到 html() 只是插入了 hte 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);

【讨论】：

这是极其低效（且损坏）的 jQuery 代码。如果您想避免串联，请执行以下操作：（另请注意 px 不需要）：$('<div />', width: myWidth ).appendTo("#myDiv");

这怎么“没用”？海报要求“差异”（关键字是“vs”），所以我告诉他差异。代码很冗长，但我不会说“效率低下”只是因为它不是一个单行代码。在向人们解释东西时，我们不应该冗长吗？

【参考方案7】：

除了给出的答案，如果你有这样的情况：

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

意思是如果上传了任何文件，你想自动添加一个文件上传，上面提到的代码将不起作用，因为文件上传后，第一个 file-upload 元素将被重新创建，因此上传的文件将是从中抹去。你应该使用 .append() 代替：

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

【参考方案8】：

这件事发生在我身上。 jQuery 版本：3.3。 如果你正在循环遍历一个对象列表，并且想要将每个对象添加为某个父 dom 元素的子元素，那么 .html 和 .append 的行为会非常不同。 .html 最终只会将最后一个对象添加到父元素，而.append 会将所有列表对象添加为父元素的子元素。