一．创建节点

为了使页面更加智能化，有时我们想动态的在 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. jquery numberbox赋值

    numberbox不能使用$('#id').val( '');只能使用$('#id').numberbox('setValue','');

  2. svn清除已保存的用户名和密码

    在项目中使用SVN是必须的,我们一般将用户名和密码进行保存处理,这样做的好处在于每次都不用输入了,方便快捷.但是当我们想用另外一个svn账号时,这时候该怎么办呢,看下图,让提示框重新出来. 找到这个页 ...

  3. saltstack（master迁移）

    环境:http://www.cnblogs.com/zzzhfo/p/6126223.html 在添加一台master 把master的/etc/salt目录下的pki打包 上传至第二台master的 ...

  4. window共享linux下的文件 samba

    1.在Ubuntu上安装samba服务 sudo apt-get install samba 2.修改配置文件vim /etc/samba/smb.conf [xubu] (共享名) guest ac ...

  5. 最简单的js确认框！

    随便举个栗子~ function bremove() { if (ids == "") {//触发函数,如果值是空弹框 alert("您还没有选择任何数据.") ...

  6. Ubuntu 16.04 安装 Apache, MySQL, PHP7

    1.安装之前先更新系统 1 sudo apt update 2.安装Apache2 1 sudo apt install apache2 3.安装PHP 1 sudo apt install php ...

  7. Ubuntu 16.04 64位 搭建 node.js NodeJS 环境

    我的系统环境: Ubuntu 16.04 64位 本文内容亲测可用, 请放心食用 使用淘宝镜像 淘宝镜像官网是https://npm.taobao.org/ 使用淘宝镜像前请自行安装好 npm 和 n ...

  8. [jquery]折叠指定条件的表格

    最近在做财务报表时候,一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num,输出表格时候,可以按照这2个自定义属性给某些带父子层级关系的内容指 ...

  9. 导入excel数据到数据库

    1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...

  10. Mybatis #和$的区别

    1.#将传入的数据当成一个字符串,会自动加上双引号.如 oder by  #{id}  ,那么解析后为oder by  “id” 2.$对传入的数据不进行操作,直接显示原值.如oder by  ${i ...