本文详细介绍了jQuery中关于DOM节点的创建、插入、包裹及操作方法，包括append、prepend、after、before等内部和外部插入节点的方法，以及wrap、unwrap、wrapAll、wrapInner等包裹节点的方法，还涵盖了节点的复制、删除、清空和替换等操作，并特别指出不同删除方法对事件行为的影响。
一：.创建节点
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
二：插入节点
内部插入节点方法
方法名 描述
append(content) 向指定元素内部后面插入节点 content
append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面
外部插入节点方法
after(content) 向指定元素的外部后面插入节点 content
after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
before(content) 向指定元素的外部前面插入节点 content
before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点
insertAfter(content) 将指定节点移到指定元素 content 外部的后面
insertBefore(content) 将指定节点移到指定元素 content 外部的前面
三：包裹节点
包裹节点
方法名 描述
wrap(html) 向指定元素包裹一层 html 代码，原本的元素会在后面
wrap(element) 向指定元素包裹一层 DOM 对象节点
wrap(function (index) {}) 使用匿名函数向指定元素包裹一层自定义内容
unwrap() 移除一层指定元素包裹的内容
wrapAll(html) 用 html 将所有元素包裹到一起，所有的当前元素都包裹
wrapAll(element) 用 DOM 对象将所有元素包裹在一起，，分别包裹
wrapInner(html) 向指定元素的子内容包裹一层 html // 里面包裹
wrapInner(element) 向指定元素的子内容包裹一层 DOM 对象节点
wrapInner(function (index) {}) 用匿名函数向指定元素的子内容包裹一层
四：节点操作
//复制节点
$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
注意：加上 true参数的话，这个元素附带的事件处理行为也复制出来。
//删除节点
$('div').remove(); //直接删除 div 元素，不保留事件行为
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以
带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。
//保留事件的删除节点
$('div').detach(); //保留事件行为的删除
注意：.remove()和.detach()都是删除节点，返回当前被删除的节点对象，可以利用再次添加，但区别在于前者在恢复时不保留事件行为，后者则保留。
//清空节点
$('div').empty(); //删除掉节点里的内容，但点当前标签保留
//替换节点
$('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
$('<span>节点</span>').replaceAll('div'); //同上
注意：节点被替换后，所包含的事件行为就全部消失了。
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
