jQuery – 7.动态创建Dom、删除节点

时间:2022-05-10 07:44:07

动态创建Dom节点

    1.使用$(html字符串)来创建Dom节点

    2.append方法用来在元素的末尾追加元素

    案例:动态生成网站列表

    3.prepend,在元素的开始添加元素。 prependTo。after,在元素之后添加元素(添加兄弟)。before:在元素之前添加元素(添加兄弟)。

删除节点

    (1)remove()删除选择的节点

    (2)empty()是将节点清空,清除节点的innerHTML,节点还在

    案例:权限选择

    练习:选美女。被悬浮行高亮显示(背景是红色),点击美女将它放到另一个的美女列表。

动态创建Dom节点


1.使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:
  

var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);

$()创建的就是一个jQuery对象,可以完全进行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text("百毒");
$("div:first").append(link);

。getElementByid的问题

2.append方法用来在元素的末尾追加元素

案例:动态生成网站列表

隐藏行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
  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="Jqeury/jquery-1.10.2.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             //判断页面上是否有table
  10.             $("input[value=提交]").click(function () {
  11.                 if ($("#tb").length > 0) {
  12.                     return;
  13.                 }
  14.                 var json = [
  15.                             { "name": "cnblog", "site": "http://www.cnblogs.com" },
  16.                             { "name": "cnbeat", "site": "http://www.cnbeat.com" },
  17.                             { "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
  18.                 ];
  19.                 var $tb = $("<table id='tb' border='1' width='300'></table>");
  20.                 $("#d1").append($tb);
  21.                 $.each(json, function () {
  22.                     var $tr = $("<tr></tr>");
  23.                     $tb.append($tr);
  24.                     var $td = $("<td><a href='" + this.site + "'>" + this.name + "</td>");
  25.                     $tr.append($td);
  26.                     $td = $("<td>" + this.site + "</td>");
  27.                     $tr.append($td);
  28.                 })
  29.             })
  30.         })
  31.     </script>
  32. </head>
  33. <body>
  34.     <div id="d1">11111</div>
  35.     <input type="button" value="提交" />
  36. </body>
  37. </html>

 

动态创建Dom(同一案例)

练习:输入员工,员工个数不确定(动态生成文本框)

创建出的元素没有append到界面之前是无法用选择器找到的,就像new一个对象 
3.prepend,在元素的开始添加元素。 prependTo。

  after,在元素之后添加元素(添加兄弟)。

  before:在元素之前添加元素(添加兄弟)。

 

 

删除节点


(1)remove()删除选择的节点

案例:清空ul中的项,代码见备注。$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。

remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点。比如重新添加到其他节点下

         var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis); // $("#ulSite li").remove().appendTo($("#ulSite2"));

(2)empty()是将节点清空,清除节点的innerHTML,节点还在

 

案例:权限选择

 

隐藏行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
  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="Jqeury/jquery-1.10.2.js"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $("input[value='>']").click(function() {
  10.                 var $link = $("#all option:selected").remove().removeAttr("selected");
  11.                 $("#sel").append($link);
  12.                 
  13.                 //一行的效果
  14.                 //$("#all option:selected").remove().removeAttr("selected").appendTo($("#sel"));
  15.                 //可以去掉remove(),达到一样的效果
  16.                 //$("#all option:selected").removeAttr("selected").appendTo($("#sel"));
  17.             });
  18.         })
  19.     </script>
  20. </head>
  21. <body>
  22.     <select id="all" size="5" multiple="multiple">
  23.         <option>查找</option>
  24.         <option>编辑</option>
  25.         <option>删除</option>
  26.         <option>添加</option>
  27.     </select>
  28.     <input type="button" value=">" />
  29.     <input type="button" value="<" />
  30.     <input type="button" value=">>" />
  31.     <input type="button" value="<<" />
  32.     <select id="sel" size="5" multiple="multiple">
  33.     </select>
  34. </body>
  35. </html>

jQuery – 7.动态创建Dom、删除节点

 

练习:选美女。被悬浮行高亮显示(背景是红色),点击美女将它放到另一个的美女列表。

jQuery – 7.动态创建Dom、删除节点

隐藏行号 复制代码 ? 这是一段程序代码。
  1. <!DOCTYPE html>
  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>4minute - 选美女</title>
  6.     <style type="text/css">
  7.         li {
  8.             width: 150px;
  9.             cursor: pointer;
  10.         }
  11.     </style>
  12.     <script src="Jqeury/jquery-1.10.2.js"></script>
  13.     <script type="text/javascript">
  14.         $(function () {
  15.             $("#mv li").mousemove(function () {
  16.                 $(this).css("background-color", "yellow");
  17.             }).mouseout(function () {
  18.                 $(this).css("background-color", "white");
  19.             }).click(function () {
  20.                 //remove会移除对象的事件 [但不会移除样式]
  21.                 $(this).remove().appendTo($("#cn")).css("background-color", "white");
  22.             })
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <ul id="mv">
  28.         <li>南智贤</li>
  29.         <li>金泫雅</li>
  30.         <li>权昭贤</li>
  31.         <li>许嘉允</li>
  32.         <li>全智允</li>
  33.     </ul>
  34.     <hr />
  35.     <ul id="cn">
  36.         
  37.     </ul>
  38. </body>
  39. </html>