jQuery HTML节点元素修改、追加的方法 html()、append()、prepend()、

我们先拟定一个代码场景

1. <div>start</div> 
2. <p>123</p> 
3. <div>end</div> 

 

html() 操作节点中的内容，一般我们可以用来快速给一个容器中赋值。

$("p").html("abc"); 

最终看到的结果

1. <div>start</div> 
2.  
3. <p>abc</p> 
4.  
5. <div>end</div> 

 

append() 追加到节点中的末尾处

$("p").append("abc"); 

  

最终看到的结果

1. <div>start</div> 
2.  
3. <p>123abc</p> 
4.  
5. <div>end</div> 

  

prepend() 追加到节点中的起始处

$("p").prepend("abc"); 

最终看到的结果

1. <div></div> 
2. <p>abc123</p> 
3. <div>end</div> 

  

alert() 追加到节点的后面

$("p").prepend("<p>abc</p>");  

 

最终看到的结果 

1. <div>start</div> 
2.  
3. <p>123</p>   
4.  
5. <p>abc</p>   
6.  
7. <div>end</div> 

 

before() 追加到节点的前面

$("p").prepend("<p>abc</p>");  

 

最终看到的结果

1. <div>start</div>   
2.  
3. <p>abc</p>   
4.  
5. <p>123</p>   
6.  
7. <div>end</div>