<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1"> <div id="dd1" class="c"> <p id="p1">哈哈</p> </div> </div> <div id="d2" class="c"> <p>哈哈1</p> </div> <input id="input1" type="text" value="嘎嘎" /> <input id="inner_insert" type="button" value="内部插入" /> <input id="outer_insert" type="button" value="外部插入" /> <input id="baoguo" type="button" value="包裹" /> <input id="tihuan" type="button" value="替换" /> <input id="shanchu" type="button" value="删除指定元素" /> <input id="detach" type="button" value="删除detach" /> <input id="copy" type="button" value="复制" /> <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script> <script type="text/javascript"> var inner_insert = document.getElementById("inner_insert"); var outer_insert = document.getElementById("outer_insert"); var baoguo = document.getElementById("baoguo"); var tihuan = document.getElementById("tihuan"); var shanchu = document.getElementById("shanchu"); var detach = document.getElementById("detach"); var copy = document.getElementById("copy"); inner_insert.onclick = function(){ /* 内部插入 */ /* append：在指定元素后面添加自定义标签字符串 */ /* $("#d1").append("<span>我是新添加的span--append<span>"); */ /* prepend：在指定元素前面添加自定义标签字符串 */ /* $("#d1").prepend("<span>我是新添加的span--prepend<span>"); */ /* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */ $("<span>我是新添加的span--append<span>").appendTo("#d1"); $("<span>我是新添加的span--prepend<span>").prependTo("#d1") } outer_insert.onclick = function(){ /* 外部插入 */ /* after：在指定元素后面添加自定义标签字符串 */ /* $("#d1").after("<span>我是新添加的span--after<span>"); */ /* before：在指定元素前面添加自定义标签字符串 */ /* $("#d1").before("<span>我是新添加的span--before<span>"); */ /* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */ /* insertAfter:在指定元素外后面添加自定义标签字符串 */ $("<span>我是新添加的span--insertAfter<span>").insertAfter("#d1"); /* insertBefore:在指定元素外后面添加自定义标签字符串 */ $("<span>我是新添加的span--insertBefore<span>").insertBefore("#d1"); } baoguo.onclick = function(){ /* 包裹wrap:指定元素被自定义标签字符串包裹（字符串必须为标签） */ /* 如果被包裹元素有多个，则分开包裹 */ /* 如果有内容，则内容在被包裹标签前；如果有多层标签，则包裹在内层 */ /* $(".c").wrap("<li><p></p></li>"); */ /* 如果被包裹元素有多个，则整体包裹 */ $(".c").wrapAll("<li><p></p></li>"); } tihuan.onclick = function(){ /* 替换 */ /* replaceWith：使用自定义标签字符串替换指定元素 */ /* $("#d1").replaceWith("<p><span>我是替换来的</span></p>"); */ $(".c").replaceWith("<p><span>我是替换来的</span></p>"); } shanchu.onclick = function(){ $("#d1").empty(); } $("#dd1").click(function(){ alert("我是d1"); }); detach.onclick = function(){ /* 删除指定元素 */ /* remove：删除指定元素 */ /* $("#d1").remove(); */ /* empty:清楚指定元素的内容 */ var $dd1 = $("#dd1").detach(); $("#d1").append($dd1); } copy.onclick = function(){ /* 复制指定元素 */ /* clone:复制元素到另一个指定位置，如果不加clone(),即不复制则会进行移动操作*/ $("#d1").append($("#p1").clone()); } </script> </body> </html>