关于jquery的append()和html()使用

在js里动态更改html内容时经常会用到append()/appendTo()和html()方法。
在此记录下使用区别。

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

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

使用

//append()
$("p").append(" <b>Hello world!</b>"); 
$("p").append(function(index){ // 参数可选，接收选择器的 index 位置。
  return "<b>这个 p 元素的 index 是：" + index + "</b>";
}; 
//appendTo()
$("<b> Hello World!</b>").appendTo("p");

相同之处
1、插入的内容依旧在主体的内部结尾，而不是主体外部。
不同之处：
1、内容和选择器的位置
2、append() 能够使用函数来附加内容。

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

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

使用

$("p").html("Hello <b>world!</b>");
$("p").html(function(index){// 参数可选，接收选择器的 index 位置。
    return "这个 p 元素的 index 是：" + index;
});

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