jQuery —— 节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $("button:first").click(function () {
                // 追加节点
                $("div").append("<P>动态创建的p元素</P>");
            });
            $("button").eq(1).click(function () {
                // 把这个元素追加给后面$("div")元素
                $("<p>动态创建的p元素</p>").appendTo($("div"));
            });
            $("button").eq(2).click(function () {
                // 首部添加
                $("div").prepend("<P>动态创建的p元素</P>");
            });
            $("button").eq(3).click(function () {
                // 把动态生成的元素添加给div的头部
                $("<P>动态创建的p元素</P>").prependTo($("div"));
            });

            $("button").eq(4).click(function () {
                // after 往后面添加兄弟节点
                $("div").after("<p>我是div后面的兄弟节点</p>");
            });
            $("button").eq(5).click(function () {
                // before 往前面添加兄弟节点
                $("div").before("<p>我是div后面的兄弟节点</p>");
            });
            $("button").eq(6).click(function () {
                // 把前面的元素，放到后面div元素的前面，兄弟节点(顺序不可颠倒)
                $("<p>我在哪？</p>").insertBefore("div");
            });
            $("button").eq(7).click(function () {
                // 把前面的元素，放到后面div元素的前面，兄弟节点(顺序不可颠倒)
                $("<p>我在哪？</p>").insertAfter("div");
            });
            // 删除节点元素
            $("button").eq(8).click(function () {
                $("div").remove();
            });
            // 删除子节点元素,但留下自己
            $("button").eq(9).click(function () {
                //  $("div").empty();
                $("div").html(""); // 效果与empty相同，推荐使用此方法
            });
            // 复制节点
            $("button").eq(10).click(function () {
                // clone 参数 ：
                // true ：深度复制,会将被复制元素的事件一同复制
                // 默认为flase ： 浅层复制，只复制元素
                $("div").append($("p").clone());
            });
            // 包裹节点 用后面的元素包裹前面的元素
            $("button").eq(11).click(function () {
                $("span").wrap($("p"));
            });
            // 包裹所有节点
            $("button").eq(12).click(function () {
                $("ul").wrapAll($("div"));
            });
            // 替换节点
            $("button").eq(13).click(function () {
                $("ul").replaceWith($("p"));
            });
        })
    </script>
</head>
<body>
<button>append 追加节点</button>
<button>appendTo 追加节点</button>
<button>prepend 首部添加</button>
<button>prependTo 首部添加</button>
<button>after 往后面添加兄弟节点</button>
<button>before 往前面添加兄弟节点</button>
<button>insertBefore 往前面添加兄弟节点</button>
<button>insertAfter 往后面添加兄弟节点</button>
<br/><br/>
<button>remove 删除节点</button>
<button>empty 删除节点</button>
<button>clone 复制节点</button>
<button>wrap 包裹节点</button>
<button>wrapAll 包裹所有节点</button>
<button>replaceWith 替换节点</button>
<div>
    <h1>我是h1标题</h1>
</div>
<p>我是div外面的p元素，不是动态添加的</p>
<span>我是一个小span</span>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
jQuery —— 节点操作

推荐阅读更多精彩内容
