jQuery中DOM节点的创建插入及包裹

一.创建节点

为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。

var box = $('<div id="box">节点</div>'); //创建一个节点

二.插入节点

内部插入节点方法：

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外部的前面

三.包裹节点

jQuery 提供了一系列方法用于包裹节点， 包裹节点是就是使用字符串代码将指定元素的代码包含着的意思。

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) {}) 用匿名函数向指定元素的子内容包裹一层

注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外

层;后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。

$('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(document.createElement('strong')); //临时的原生 DOM

$('div').unwrap(); //移除一层包裹内容，多个需移除多次

$('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong

$('div').wrapAll($('strong').get(0)); //同上

$('div').wrapInner('<strong></strong>'); //包裹子元素内容

$('div').wrapInner($('strong').get(0)); //DOM 节点

最后编辑：2019-12-13

作者：qingheluo

这个作者貌似有点懒，什么都没有留下。

站内专栏