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

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

$（'close'）。单击（函数（）{
警报（“测试”）；
}).appendTo（$（'.widget head'）；
var sHtml=$（'.widget head'）.wrap（''）.parent（）.html（）；
$（currentTmpContainer）.html（resultHtml）；

（这只是一段代码片段。我想您可以理解它。谢谢。）
最后，我发现在我的示例中，

.click

不起作用。我想原因是因为我使用的是

.html（）

而不是

.append（）

。对吗？谢谢

使用

.html

覆盖内容，而使用

.append

将内容添加到标记的末尾

html

只接受原始字符串，使用

append

也可以使用jQuery对象

例如：

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

$（'#foo'）.html（$（''）//无效的
$（'#foo'）。追加（$（''）//有效！

活动：

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

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

var$input=$（''）。单击（函数（）{
警报（“foo”）；
});
$（'#foo'）。追加（$input）；

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

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

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

结果是

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

你好，世界

我使用.append（）将新元素添加到现有元素中。例如

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

$（'.myElement'）.append（$（'internalelement！'））；

导致

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

内部元素

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

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

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

var newElement=$（'internal Element！'）。单击（函数（e）{alert（“Hello！”）；}）；
$（'.myElement'）.append（新元素）；

似乎

.html（）

无法附加事件。但是

append

可以提前附加事件。我说得对吗？我对这部分不熟悉，希望你能多告诉我一些。谢谢。@Joe.wang-

append（）

直接操作DOM，而

html（）

只是更改html代码。@Joe.wang，是的，你是对的，这不能用

html

完成，除非你使用带有

onclick

属性的内联代码，哎哟。@gdoron-你最后缺少了一个

）

）@格多龙，你能帮我再复习一遍吗？我更新了它。谢谢。是的，

.html（）

不会复制jQuery事件，如果要复制，应该使用

.clone（true）

，如果要替换，请使用

append

@gdoron谢谢，

。append

是替换原始html吗？如果将现有节点附加到其他位置，它将“重新定位”它，不是克隆的。@gdoron好的，我知道了。只有一个，谢谢。就我而言，我认为我没有任何理由使用

.clone（true）

。我只需要构建一个对象并“重新定位”它。谢谢你的评论。