一:.创建节点
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'); //同上
注意:节点被替换后,所包含的事件行为就全部消失了。