用append是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="list">
<ul><li>ONE</li><li>TWO</li>
<li>THREE</li><li>FOUR</li></ul>
</div>
<div class="add">+添加</div>
<script>
$('.add').click(function(){
var str='<li>FIVE</li>';
$('.list li:last-child').append(str);
});
</script>
</body>
</html>
//输出为在FOUR的文本后面添加了
- FIVE
- ,再点添加就在FOUR和FIVE 的后面分别添加了
- FIVE
- ，因为这是父子节点添加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="list"> <ul><li>ONE</li><li>TWO</li> <li>THREE</li><li>FOUR</li></ul> </div> <div class="add">+添加</div> <script> $('.add').click(function(){ $('<li>FIVE</li>').appendTo($('.list li:last-child')); //注意这里的不同，一个是把变量添加在里面，一个是把节点放在里面 }); </script> </body> </html>//输出为在FOUR的文本后面添加了
- FIVE
- ,再点添加就在FOUR和FIVE 的后面分别添加了
- FIVE
- ，因为这是父子节点添加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="list"> <ul><li>ONE</li><li>TWO</li> <li>THREE</li><li>FOUR</li></ul> </div> <div class="add">+添加</div> <script> $('.add').click(function(){ var str='<li>FIVE</li>'; $('.list li:last-child').after(str); //这里就是把<li>FIVE</li>添加到<li>FOUR</li>这节点的后面，并不像append和appendTo一样添加到内容FOUR的后面 }); </script> </body> </html>