<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div id="div1">hello div1</div> <p id="p1">hello p1</p> <div>hello div2 <p id="p2">hello p2</p> </div> <script> var ele=$("#p2"); //$("#div1").append(ele); //把p2插入到div1的子代最后 //$("#p1").appendTo(ele); //把p1插入到p2子代最后 //("#p1").prepend(ele); // 把p2插入到p1子代里的第一个后位置 //$(ele).prependTo($("#p1")); //把p2插入到P1子代里的第一个位置 //$("#p1").after(ele); //把p2加入到p1后面的同级兄弟标签中去 //$(ele).insertAfter("#p1"); //把p2加入到p1后面的同级兄弟标签中去 //$("#div1").before(ele); //把p2加入到div1前面的同级兄弟标签中去 //$(ele).insertBefore("#div1"); //把p2加入到div1前面的同级兄弟标签中去 </script> </body> </html>
注:以上4对方法是实现标签兄弟父子关系之间的位置移动,或者在在参数那直接加入文本 成为添加文本的方式. 每队的方法效果相同,只是一个是表达式在前,一个是参数在前.实现4中方法