html 代码如下

<p>Dom操作练习</p>

1. jQuery 插入节点

$("p").append("武汉php");    //向每个匹配的元素内部追加内容
$("<span>武汉php</span>").appendTo("p");

$("p").prepend("武汉php");    //向每个匹配的元素内部前置内容
$("<span>武汉php</span>").prependTo("p");

$("p").after("武汉php");      //在每个匹配的元素之后插入内容
$("<span>武汉php</span>").insertAfter("p");

$("p").before("武汉php");     //在每个匹配的元素之前插入内容
("<span>武汉php</span>").insertBefore("p");

2. jQuery 创建节点

//创建一个DOM对象，并将这个对象包装成一个jQuery对象然后返回
var dm1=$("<li></li>")      //创建元素节点

var dm1=$("<li title="西瓜"></li>")       //创建属性节点


var dm1=$("<li title='西瓜'>西瓜</li>")     //下面是创建二者的结合

var dm2=$("<li title='香蕉'>香蕉</li>");

 $("ul").append(dm1);       //将新创建的第1个li节点追加到ul节点下的最后一个子节点

 $("ul").prepend(dm2);      //将新创建的第2个li节点追加到ul节点下的第一个子节点

3. jQuery 删除节点

$("p").remove();        //删除节点
$("p").empty();     //清空节点

4. jQuery 复制节点

$(this).clone().appendTo("p");      //复制节点
$(this).clone(true).appendTo("p");  //复制节点，包含所绑定的事件

5. jQuery 替换节点

$("p").replaceWith("武汉php小班授课");        //替换节点
$("<span>武汉php小班授课</span>").replaceAll("p");

6. jQuery 包裹节点

//<p>Dom操作练习</p>
//<p>Dom操作练习</p>

$("p").wrap("<div></div>");         //包裹节点
$("p").wrapAll("<div></div>");      //将所有匹配的元素用一个元素来包裹
$("p").wrapInner("<div></div>");    //在元素内部包裹子内容