一.创建节点

1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div>";
2 $('body').append(box); //将节点插入到<body>元素内部

二.插入节点
jQuery 提供了好几种个方法来插入节点:
1、内部插入节点方法

 方法名 描述
append(content) 向指定元素内部后面插入节点 content
append(function (index, html) {}) 使用匿名函数向指定元素内部后面插入节点
appendTo(content) 将指定元素移入到指定元素 content 内部后面
prepend(content) 向指定元素 content 内部的前面插入节点
prepend(function (index, html) {}) 使用匿名函数向指定元素内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面

代码示例:

01 $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点
02 $('div').append(function (index, html) { //使用匿名函数插入节点,index为该div的索引,即第几个div,html是原节点内部内容。
03 return '<strong>节点</strong>+index+html';
04 });
05 $('span').appendTo('div'); //讲 span 节点移入 div 节点内
06 $('span').appendTo($('div')); //同上
07 $('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面
08 $('div').append(function (index, html) { //使用匿名函数,同上
09 return '<span>节点</span>';
10 });
11 $('span').prependTo('div'); //将 span 移入 div 内部的前面
12 $('span').prependTo($('div')); //同上

2、外部插入节点方法

方法名 描述
after(content) 向指定元素的外部后面插入节点 content
after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点
before(content) 向指定元素的外部前面插入节点 content
before(function (index, html) {}) 使用匿名函数向指定元素的外部前面插入节点
insertAfter(content) 将指定节点移到指定元素 content 外部的后面
insertBefore(content) 将指定节点移到指定元素 content 外部的前面

代码示例:

01 $('div').after('<span>节点</span>'); //向 div 的同级节点后面插入 span
02 $('div').after(function (index, html) { //使用匿名函数,同上
03 return '<span>节点</span>';
04 });
05 $('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span
06 $('div').before(function (index, html) { //使用匿名函数,同上
07 return '<span>节点</span>';
08 });
09 $('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
10 $('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面

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

代码示例:

01 $('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong
02 $('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
03 $('div').wrap('<strong><em></em></strong>'); //包裹多个元素
04 $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
05 $('div').wrap(document.createElement('strong')); //临时的原生 DOM
06 $('div').wrap(function (index) { //匿名函数
07 return '<strong></strong>';
08 });
09 $('div').unwrap(); //移除一层包裹内容,多个需移除多次
10 $('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong
11 $('div').wrapAll($('strong').get(0)); //同上
12 $('div').wrapInner('<strong></strong>'); //包裹子元素内容
13 $('div').wrapInner($('strong').get(0)); //DOM 节点
14 $('div').wrapInner(function () { //匿名函数
15 return '<strong></strong>';
16 });

注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包含,而.wrapInner()在内层包含。

四.节点操作
除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和删除节点。

1 //复制节点
2 $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中

注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true参数的话,这个元素附带的事件处理行为也复制出来。

1 //删除节点
2 $('div').remove(); //直接删除 div 元素

注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的,比如:$('div').remove('#box');只删除 id=box 的 div。

1 //保留事件的删除节点
2 $('div').detach(); //保留事件行为的删除

注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

1 //清空节点
2 $('div').empty(); //删除掉节点里的内容
3 //替换节点
4 $('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
5 $('<span>节点</span>').replaceAll('div'); //同上

jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作的更多相关文章

  1. redis 集群新增节点,slots槽分配,删除节点, [ERR] Calling MIGRATE ERR Syntax error, try CLIENT (LIST | KILL | GET...

    redis reshard 重新分槽(slots) https://github.com/antirez/redis/issues/5029 redis 官方已确认该bug redis 集群重新(re ...

  2. JQuery(选择器、事件、DOM操作)

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

  3. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  4. 事件冒泡及事件委托的理解(JQuery Dom操作)

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  5. jQuery学习笔记(DOM操作)

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  6. 《锋利的JQuery》读书要点笔记2——DOM操作

    第三章 jQuery中的DOM操作 3.1 DOM(Document Object Model)操作的分类 1. DOM Core    例如:document.getElementsByTagNam ...

  7. jQuery中的DOM操作(三)

    一.查找节点    [返回jQuery对象]$(选择器字符串);    使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象eg: $('div.one spa ...

  8. jQuery进行DOM操作记录

    1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuer ...

  9. 用OC实现双向链表:构造链表、插入节点、删除节点、遍历节点

    一.介绍 双向链表:每一个节点前后指针域都和它的上一个节点互相指向,尾节点的next指向空,首节点的pre指向空. 二.使用 注:跟单链表差不多,简单写常用的.循环链表无法形象化打印,后面也暂不实现了 ...

  10. mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点  代码如下   re ...

随机推荐

  1. wamp环境网站根目录更改

    1.修改wampserver的默认目录 安装好wampserver后,网站根目录默认为:安装目录\wamp\www,也就是wampserver安装目录下的www文件夹. 我们以更改为:D\www为例. ...

  2. 超轻型响应jQuery旋转木马幻灯片插件anoSlide

    http://www.jqcool.net/demo/201409/jquery-anoslide/

  3. Rotate List 面试题

    今天做了leetcode的Rotate List,刚开始头脑不清楚,写的乱七八糟的,后来改了下,提交了,能过,把代码贴出来. 做题的时候头脑要清楚,我刚开始做完的时候才发现我把向左向右移动弄反了,后来 ...

  4. IDA6.6调试安卓程序配置教程

    1.把ida 目录下android_server传到设备的 /data/local/tmp/ cmd执行adb shell 进入模拟器命令行 su cd /data/local/tmp/ chmod ...

  5. c# 接口代码实例

    类和接口的实现 接口定义:为一组方法签名指定一个名称的方式. 类实现接口,就一定要提供接口所有方法的实现. 即使抽象类,也要全部实现,但是,它可以把接口方法声明为abstract的,从而把这个接口方法 ...

  6. 解决xp下无法通过windows installer服务安装此安装程序包。您必须安装带有更新版本Wi

    今天装 tortoisegit 的时候发现安装包不能使用.报错无法通过windows installer服务安装此安装程序包.您必须安装带有更新版本Windows Installer服务的Window ...

  7. EMS-keil C51常用错误

    1. LAB100.C(12): error C216: subscript on non-array or too many dimensions 原程序如下: #include <reg51 ...

  8. 自己的缺省(sheng)源

    write无力吐槽了 #include <cstdio> #include <iostream> #include <algorithm> #include < ...

  9. VisualSVN Server仓库迁移到Linux(包含所有版本, 权限,用户信息)

    公司开发服务器从Windows换成CentOS,所以要把原服务都转移到Linux下,MySQL.SMB的迁移都很顺利,但是SVN的转移却遇到了些问题,花费了三天时间,走了不少弯路,现在总算解决了SVN ...

  10. Visual Studio创建跨平台移动应用_01.Cordova&Xamarin

          目前开发移动应用有三种模式:Native.Hybird.Web,若要开发跨平台的移动应用,又希望与本地API交互,那么Hybird是一个非常好的选择.       作为一个.Net程序员, ...