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

动态创建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方法用来在元素的末尾追加元素

案例：动态生成网站列表

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            //判断页面上是否有table

            $("input[value=提交]").click(function () {

                if ($("#tb").length > 0) {

```
                    return;
```
```
                }
```
```
                var json = [
```

                            { "name": "cnblog", "site": "http://www.cnblogs.com" },

                            { "name": "cnbeat", "site": "http://www.cnbeat.com" },

                            { "name": "qiushibaike", "site": "http://www.qiushibaike.com" }

```
                ];
```

                var $tb = $("<table id='tb' border='1' width='300'></table>");

```
                $("#d1").append($tb);
```

                $.each(json, function () {

                    var $tr = $("<tr></tr>");

```
                    $tb.append($tr);
```

                    var $td = $("<td><a href='" + this.site + "'>" + this.name + "</td>");

```
                    $tr.append($td);
```

                    $td = $("<td>" + this.site + "</td>");

```
                    $tr.append($td);
```
```
                })
```
```
            })
```
```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <div id="d1">11111</div>
```

    <input type="button" value="提交" />

```
</body>
```
```
</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，节点还在

案例：权限选择

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            $("input[value='>']").click(function() {

                var $link = $("#all option:selected").remove().removeAttr("selected");

                $("#sel").append($link);

```
                
```
```
                //一行的效果
```

                //$("#all option:selected").remove().removeAttr("selected").appendTo($("#sel"));

                //可以去掉remove(),达到一样的效果

                //$("#all option:selected").removeAttr("selected").appendTo($("#sel"));

```
            });
```
```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```

    <select id="all" size="5" multiple="multiple">

```
        <option>查找</option>
```
```
        <option>编辑</option>
```
```
        <option>删除</option>
```
```
        <option>添加</option>
```
```
    </select>
```
```
    <input type="button" value=">" />
```
```
    <input type="button" value="<" />
```
```
    <input type="button" value=">>" />
```
```
    <input type="button" value="<<" />
```

    <select id="sel" size="5" multiple="multiple">

```
    </select>
```
```
</body>
```
```
</html>
```

练习：选美女。被悬浮行高亮显示（背景是红色），点击美女将它放到另一个的美女列表。

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

```
    <title>4minute - 选美女</title>
```
```
    <style type="text/css">
```
```
        li {
```
```
            width: 150px;
```
```
            cursor: pointer;
```
```
        }
```
```
    </style>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            $("#mv li").mousemove(function () {

                $(this).css("background-color", "yellow");

```
            }).mouseout(function () {
```

                $(this).css("background-color", "white");

```
            }).click(function () {
```

                //remove会移除对象的事件 [但不会移除样式]

                $(this).remove().appendTo($("#cn")).css("background-color", "white");

```
            })
```
```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```
```
    <ul id="mv">
```
```
        <li>南智贤</li>
```
```
        <li>金泫雅</li>
```
```
        <li>权昭贤</li>
```
```
        <li>许嘉允</li>
```
```
        <li>全智允</li>
```
```
    </ul>
```
```
    <hr />
```
```
    <ul id="cn">
```
```
        
```
```
    </ul>
```
```
</body>
```
```
</html>
```