<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> </head> <body> //Jquery的dom操作 append() 在容器插入标签(插入到最后) appendTo() 把标签插入到容器(插入到最后) prepend() 在容器插入标签(插入到最前) prependTo() 把标签插入到容器(插入到最前) after() 在某个标签后插入标签 inserAfter() 把某个标签插入到标签后 before() 在某个标签前插入标签 insertBefore() 把某个标签插入到标签前 empty() 清空内部子节点 remove() 移除节点自身，不保存事件和属性 detach() 移除节点自身,保存事件和属性 clone() 克隆节点 （true）克隆事件 replaceWith() * 将标签替换为其他标签 replaceAll() * 用标签替换标签 wrap() * 用标签包裹标签 unwrap() * 去除容器 wrapall() * 用标签包裹标签 wrapinner() * //html <ul class="list"> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <div id="box">hhhhhh</div> <div id="box1">aaaaaa</div> <div class="box2"><span>inner</span></div> <div class="a1">a1</div> <div class="a2">a2</div> <script type="text/javascript"> //举例 var $oDiv4 = $("<li>li4</li>"); //创建子元素节点 $(".list").append($oDiv4); //为类名为.list的父元素添加子元素 $("#wrap").append("<p class='three'>我是子元素append</p>"); var $oDiv5 = $("<li>li5</li>"); $oDiv5.appendTo($(".list")); //标签添加到类名为list后面，默认在最后面 var $oDiv6 = $("<li>li6</li>"); $(".list").prepend($oDiv6); //添加到最前面，即父元素下的第一个标签 var $oDiv7 = $("<li>li7</li>") $oDiv5.after($oDiv7); //在li5后面加个li7 $("#box").empty(); //清空内部子节点 $("#box1").remove(); //id为box1的标签从网页中移除 var $box2 = $(".box2").clone(true); //克隆， $oDiv7.append($box2); //然后添加到li7后面 $(".box2").replaceWith("替换原来内容"); //替换原来内容，其实用html()方法也可以实现 </script> </body> </html>