DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 節點的插入之append()和appendTo()的用法介紹
節點的插入之append()和appendTo()的用法介紹
編輯:JavaScript綜合知識     

 說到節點的插入想必大家對append()和appendTo()的用法並不陌生吧,下面有個不錯的是,希望對大家學習有所幫助

代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>jquery</title>  <script type="text/javascript" src="jquery-1.7.2.js"></script>  <script type="text/javascript">  $(function(){  //append()的用法  //$("ul").append("<li title='abc'>hello</li>");  //$("ul").append("<li title='xyz'>world</li>");  //appendTo()的用法  $("<li title='xyz'>hello</li>").appendTo($("ul"));  });  </script>  </head>  <body>  <p title="hello world">您認為聖思園培訓好不好呢?</p>  <ul>  <li title="1">好</li>  <li title="2">很好</li>  <li title="3">非常好</li>  <li title="4">特別好</li>  <li title="5">太好了</li>  <li title="6">好的無法描述了</li>  </ul>  </body>    </html>    在已有的節點上操作  代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>jquery4</title>  <script type="text/javascript" src="jquery-1.7.2.js"></script>  <script type="text/javascript">  $(function(){  var li1 = $("<li title='abc'>hello</li>");  var li2 = $("<li title='abc'>world</li>");  var li3 = $("<li title='abc'>hello world</li>");  $("ul").append(li1);  $("ul").prepend(li2);  $("ul li:eq(4)").after(li3);    });  </script>  </head>  <body>  <p title="hello world">您認為聖思園培訓好不好呢?</p>  <ul>  <li title="1">好</li>  <li title="2">很好</li>  <li title="3">非常好</li>  <li title="4">特別好</li>  <li title="5">太好了</li>  <li title="6">好的無法描述了</li>  </ul>  </body>  </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved