JQuery动态插入节点

Jquery动态插入节点有内部和外部两种方式。

内部插入节点

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>内部动态插入节点方法</title>
 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 7 <style>
 8 body{font-size:13px;}
 9 img{border:solid 1px #ccc; padding:3px; margin:5px;}
10 </style>
11 <script type="text/javascript">
12 $(function(){
13 $('img').appendTo($('span'));    //插入内容；
14 })
15 </script>
16 </head>
17 <body>
18 <img title='200' src='./lf_tu.jpg' />
19 <span><img title='2010' src='./zj_tu.jpg' /></span></body>
20 </html>

 

 

外部插入节点

外部动态插入 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>外部动态插入方法</title>
 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 7 <style type="text/css">
 8 body{font-size:13px;}
 9 </style>
10 <script type="text/javascript">
11 $(function(){
12 $('span').after(retHtml);    //插入方法
13 function retHtml(){
14 var str = "<span><b>china</b></span>";
15 return str;
16 }
17 })
18 </script>
19 </head>
20 <body>
21 <span>JQuery</span>
22 </body>
23 </html>

 

 

posted @ 2012-08-03 10:29  光腾新一  阅读(119)  评论(0)    收藏  举报