javascript - 两种构建 html 的方法——.html() 和 .append()

Question

在 jQuery 中，我知道我们可以使用 .html(此处为 html 代码) 替换对象的 HTML，我们还可以使用其中一种方法 (append, appendTo、prepend 等)以实现与 .html(...) 相同的目标。

但这两种方式有什么区别呢？

已更新

我认为我应该发布我的代码以使我的问题更清楚，请查看。

$('<a>close</a>').click(function() {
            alert("test");
        }).appendTo($('.widget-head'));

var sHtml = $('.widget-head').wrap('<p>').parent().html();
$(currentTmpContainer).html(resultHtml);

(这只是一个代码片段。我想你可以理解它。谢谢。)
最后，我发现 .click 在我的示例中不起作用。我想原因是因为我使用的是 .html() 而不是 .append()。这是对的吗？谢谢。

Answer 1

1. 使用 .html 覆盖内容，使用 .append 将内容添加到标记的末尾。
2. html 仅接受原始字符串，通过 append 您也可以使用 jQuery 对象。

例子:

$('#foo').html($('<input>')); //invalid!
$('#foo').append($('<input>')); //Valid!

有事件:

var $input = $('<input>').click(function(){
    alert('foo');
});

$('#foo').append($input);