学习要点：
1.创建节点
2.插入节点
3.包裹节点
4.节点操作
DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的"M"。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点的关系，可以创建、插入、替换、克隆、删除等一系列的元素操作。
一、创建节点
为了使页面更加智能化，有时我们想在动态的html页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
var box=$("<div id="box">节点</div>"); //创建一个节点
$("body").append(box) //将节点插入到<body>元素内部
二、插入节点
在创建节点的过程中，其实我们已经演示怎么通过append()方法来插入一个节点，但除了这个方法之余呢，jquery提供了其他几个方法来插入节点。
1.内部插入节点的方法
append(content):向指定元素内部后面擦入节点content
append(function(index,html){}):使用匿名函数向指定元素内部后面插入节点
appendTo(content):将指定元素移入到指定元素content内部后面（不需要创建节点）
prepend(content):向指定元素content内部的前面插入节点
prepend(function(index,html){}):使用匿名函数向指定元素的前面插入节点
prependTo(content):将指定元素移入到指定元素content内部前面
$("div").append("<strong>节点</strong>"); //向div内部插入strong节点
$("div").append(function(index,html){ //使用匿名函数插入节点，html是原节点
return "<strong>节点</strong>";
})；
$("span").appendTo("div"); //将span节点移入div内
$("span")appendTo($("div")); //同上
$("div").prepend("<span>节点</span>") ; //将span插入到div内部的前面
wrap(html):向指定元素包裹一层html代码
wrap(element):向指定元素包裹一层DOM对象节点
wrap(function(index){}):使用匿名函数向指定元素包裹一层自定义内容
upwrap():移除一层指定元素包裹的内容
wrapAll(html):用html将所有元素包裹在一起
wrapAll(element):用DOM对象将所有元素包裹在一起
wrapInner(html):向指定元素的子内容包裹一层html
wrapInner(element):向指定元素的子内容包裹一层DOM对象节点
wrapInner(function(index){}):用匿名函数向指定元素的子内容包裹一层
$("div").wrap("<strong><strong>"); //在div外层包裹一层strong
$("div").wrap("<strong>123</strong>"); //包裹的元素可以带内容
$("div").wrap("<strong><em></em></strong>"); //包裹多个元素
$("div").wrap($("strong").get(0)); //也可以包裹一个原生DOM
$("div").wrap(docunment.creatElement("strong")); //临时的原生
$("div").wrap(function(index){ //匿名函数
return "<strong></strong>";
})；
$("div").upwrap(); //移除一层包裹内容，多个需移除多次
$("div").wrapAll("<strong></strong>"); //所有div外面只包含一层strong
$("div").wrapAll($("strong").get(0)); //所有div外面只包含一层strong
$("div").wrapInner("<strong></strong>"); //包裹子元素内容
$("div").wrapInner($("strong").get(0)); //DOM节点
$("div").wrapInner(function(index){ //匿名函数
return "<strong></strong>";
});
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层，这两种都是在外层包含，而.wrapInner()在内层包含。
四、节点操作
除了创建、插入和包裹节点，jquery还提供了一些常规的节点操作方法：复制、替换和删除节点。
//复制节点
$("body").append($("div").clone(true)); //复制一个节点添加到HTML中
$("div").clone(true).appendTo("body"); //同上
注意：clone（true）参数可以为空，表示只复制元素和内容，不复制事件行为，而加上true参数的话，这个元素附带的事件处理行为也复制出来
//删除节点
$("div").remove(); //直接删除div元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素，而.remove()本身也可以带选择符参数的，比如：$("div").remove("#box")只删除id="box"的div
//保留事件的删除节点
$("div").detach(); //保留事件行为的删除
注意：remove（）和detach（）都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
$("div").remove().appendTo("body"); //删除后又添加，事件行为不保留
$("div").detach().appendTo("body"); //删除后又添加，事件行为保留
//清空节点
$("div").empty(); //删除掉节点里的内容，保留空标签
注意：节点被替换后，所包含的事件行为就全部消失了。
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
