jQuery获得或设置内容和属性、添加属性 append和after的区别

来自w3school 在线教程

jQuery获得或设置内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

 1 $("#btn1").click(function(){
 2   alert("Text: " + $("#test").text());
 3 });
 4 $("#btn2").click(function(){
 5   alert("HTML: " + $("#test").html());
 6 });
 7
 8 $("#btn1").click(function(){
 9   alert("Value: " + $("#test").val());
10 });

1 $("#btn1").click(function(){
2   $("#test1").text("Hello world!");
3 });
4 $("#btn2").click(function(){
5   $("#test2").html("<b>Hello world!</b>");
6 });
7 $("#btn3").click(function(){
8   $("#test3").val("Dolly Duck");
9 });

jQuery添加

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

append和after的区别

append() 在被选元素的结尾插入元素。

after() 在被选元素之后插入内容。

这二者的区别在于，append是在选中的元素的内部插入新的html代码，也就说新插入的一些元素将作为被选中元素的子元素存在。

而after是在被选中的元素的之外的后面插入新的html代码，也就是说新插入的一些元素和被选中的元素是同级的关系。

prepend和before的区别同理。