一．创建节点

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

varbox=$('<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 内部前面

$('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点
$('div').append(function(index,html){ //使用匿名函数插入节点，html 是原节点 return'<strong>节点</strong>';
});
$('span').appendTo('div'); //讲 span 节点移入 div 节点内
$('span').appendTo($('div')); //同上
$('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面
$('div').append(function(index,html){ //使用匿名函数，同上 return'<span>节点</span>'; });
$('span').prependTo('div'); //将 span 移入 div 内部的前面
$('span').prependTo($('div')); //同上

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

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

三．包裹节点

方法名 描述
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){}) 用匿名函数向指定元素的子内容包裹一层
$('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').wrap(function(index){ //匿名函数 return'<strong></strong>'; });
$('div').unwrap(); //移除一层包裹内容，多个需移除多次
$('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong
$('div').wrapAll($('strong').get(0)); //同上
$('div').wrapInner('<strong></strong>'); //包裹子元素内容
$('div').wrapInner($('strong').get(0)); //DOM 节点
$('div').wrapInner(function(){ //匿名函数 return'<strong></strong>'; });
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外 层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包 含，而.wrapInner()在内层包含。

四．节点操作

除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和 删除节点。 
//复制节点 
$('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 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'); //同上
注意：节点被替换后，所包含的事件行为就全部消失了。

第6章 DOM节点操作的更多相关文章

  1. 第四章 DOM节点操作

    1.什么是DOM:DOM(document object model)文档对象模型,把每一个元素看做是一个节点,然后对节点进行增删改查的操作 2.DOM的分类:(1)Core Dom:可以对html, ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  4. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  5. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  6. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  7. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  8. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  9. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

随机推荐

  1. 【荐】PHP采集工具curl快速入门教程

    为什么要用CURL? CURL(Client URL Library Functions)是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTT ...

  2. 【Go入门教程1】Go 安装，GOROOT，GOPATH，Go工作空间

    Go安装 Windows 安装 访问Golang Code下载页,32 位请选择名称中包含 windows-386 的 msi 安装包,64 位请选择名称中包含 windows-amd64 的.下载好 ...

  3. Spring中集合类型属性注入

    我们都知道如何去注入普通属性的值,非常简单,那么我们如何去注入开发中常见的集合类型的属性了,别急,往下看. 这里将介绍如何给Map list set Array Properties 这些属性注入值. ...

  4. 报错注入分析之(count()、rand()、group by)分析，被大佬称为floor报错注入

    PS:在这几天的学习当中很多的文章都将此注入方式称之为“floor报错分析”但经过我这几天的学习.个人觉得不该如此称呼!若君有意请详细阅读此篇文章.特别感谢米怀特的开导,说句实在的研究这个注入有四天了 ...

  5. PDO和PDOStatement类常用方法

    PDO — PDO 类 PDO::beginTransaction — 启动一个事务 PDO::commit — 提交一个事务 PDO::__construct — 创建一个表示数据库连接的 PDO ...

  6. jstl param url redirect import

    import标签 import标签用来导入其他页面 属性: * url :引入页面的路径 * context :工程名 * var :将引入的页面保存到一个变量中 * scope :保存到一个作用域中 ...

  7. C# mongodb 驱动操作（Z）

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  8. laravel安装笔记

    一.安装composer 安装之前将\php\php.ini文件中的php_openssl.dll扩展库开启,否则composer在安装过程中会出现错误提示. (我在安装过程中发现apache目录下的 ...

  9. .NET 接口

    接口      接口是一组抽象成员的集合,表示某个类或结构可以选择去实现的行为,描述的是可属于任何类或结构的一组相关功能.接口方法的实现是在实现接口的类中完成的,实现接口的类可以显式实现该接口的成员, ...

  10. seajs hello world

    http://localhost/seajs/index.html <!doctype html> <head> <title>Hello Seajs</ti ...