10.节点操作 · 程序员开发笔记

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ padding:40px } #hd{ width: 600px; border: 2px solid blue; } </style> </head> <body> <input type="button" value="点我啊" id="btn" /> <br /><br /> <h1 id="title">后盾人人人做后盾</h1> <div id="hd"> <p>我们是p标签0</p> <p>我们是p标签1</p> <p>我们是p标签2</p> <p>我们是p标签3</p> <p>我们是p标签4</p> <p>我们是p标签5</p> <p>我们是p标签6</p> <p>我们是p标签7</p> </div> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#btn").click(function(){ var newp = '<p class="houdun">我是新内容</p>'; //追加元素 //$("#hd").append(newp); //$(newp).appendTo($("#hd")); //$("#hd").append($("#title")); //$("#hd").prepend(newp); //$(newp).prependTo($("#hd")); //外部插入 //$("#hd p").eq(2).after(newp); //$(newp).insertAfter($("#hd p").eq(2)); //$("#hd p").eq(2).before(newp); $(newp).insertBefore($("#hd p").eq(2)); }) </script> <script type="text/javascript"> $("#btn").click(function(){ //$("#hd p").wrap("<u class='abc'></u>"); //取消包裹 //$("#hd p").unwrap('u'); //$("#hd p").wrapAll("<u class='abc'></u>"); //$("#hd p").wrapInner("<u class='abc'></u>"); //替换 $("#hd p").eq(2).replaceWith($("#title")); //$("#hd p").replaceWith($("#title")); //$("#title").replaceAll($("#hd p")); }) </script> <script type="text/javascript"> $(".t").click(function(){ alert(123); }) $("#btn").click(function(){ //清空元素 //$("#hd").empty(); //复制节点 //clone 方法中的true参数表示元素的事件也复制过来 var newh = $("#title").clone(true); $("#hd").append(newh); }) </script> <script type="text/javascript"> $("#hd").click(function(){ alert('哈哈哈哈哈') ; }) $("#btn").click(function(){ //$("#hd").remove(); //$("#hd").detach(); //var hd = $("#hd"); //hd.remove(); //$("body").append(hd); var hd = $("#hd"); hd.detach(); $("body").append(hd); }) </script> </body> </html>