Question

在jQuery中，我知道我们可以使用.html(html code here)替换对象的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

使用.html覆盖内容，而使用.append时，您可以将内容添加到代码的末尾。
html只接受一个原始字符串，append也可以使用jQuery对象。

示例：

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

有事件：

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

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

Answer 2

我倾向于使用.html（）来更改元素的文本。 E.g。

$('.myElement').html('Hello, World!');

结果类似于

<p class='myElement'>Hello, World!</p>

我使用.append（）将新元素添加到现有元素。 E.g。

$('.myElement').append($('<span>Inner Element!</span>'));

结果是

<p class='myElement'><span>Inner Element!</span></p>

我使用.append（）的原因是它允许我使用jQuery构建新元素。 E.g。

var newElement = $('<span>Inner Element!</span>').click(function(e){ alert("Hello!"); });
$('.myElement').append(newElement);

构建html的两种方法 - .html（）和.append（）

2 个答案: