一.创建节点
为了使页面更加智能化,有时我们想动态的在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 节点
- 本文固定链接: https://www.qingheluo.com/jqueryzhongdomjiediandechuangjiancharujibaoguo/
- 转载请注明: qingheluo 于 清河洛 发表