在js里动态更改html内容时经常会用到append()/appendTo()和html()方法。

在此记录下使用区别。

append()与appendTo()在元素尾部插入内容

//语法

$(selector).append(content) //content可包含 HTML 标签，可为函数

$(content).appendTo(selector) //content可包含 HTML 标签，不可为函数

使用

//append()

$("p").append(" Hello world!");

$("p").append(function(index){ // 参数可选，接收选择器的 index 位置。

return "这个 p 元素的 index 是：" + index + "";

};

//appendTo()

$(" Hello World!").appendTo("p");

相同之处

1、插入的内容依旧在主体的内部结尾，而不是主体外部。

不同之处：

1、内容和选择器的位置

2、append() 能够使用函数来附加内容。

html() 设置所有匹配元素的内容/返回第一个匹配元素的内容

//语法

$(selector).html(content)//content可包含 HTML 标签，为空时返回元素内容，可为函数

使用

$("p").html("Hello world!");

$("p").html(function(index){// 参数可选，接收选择器的 index 位置。

return "这个 p 元素的 index 是：" + index;

});

总结：append()/appendTo()侧重与添加元素内容，html()侧重于替换元素内容。