juqery 学习之五 文档处理 插入


Posted in Javascript onFebruary 11, 2011

append(content)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。
--------------------------------------------------------------------------------
Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the specified elements, adding them into the document.
返回值
jQuery
参数
content (String, Element, jQuery) : C要追加到目标中的内容
示例
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
-
--------------------------------------------------------------------------------------------------------------------------------------------------
appendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
--------------------------------------------------------------------------------
Append all of the matched elements to another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to A, you're appending A to B.
返回值
jQuery
参数
content (String) :用于被追加的内容
示例
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").appendTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
--------------------------------------------------------------------------------------------------------------------------------------------------
prepend(content)
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
--------------------------------------------------------------------------------
Prepend content to the inside of every matched element.
This operation is the best way to insert elements inside, at the beginning, of all matched elements.
返回值
jQuery
参数
content (String, Element, jQuery) : 要插入到目标元素内部前端的内容
示例
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
--------------------------------------------------------------------------------
将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
--------------------------------------------------------------------------------
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>
--------------------------------------------------------------------------------------------------------------------------------------------------
prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
--------------------------------------------------------------------------------
Prepend all of the matched elements to another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to A, you're prepending A to B.
返回值
jQuery
参数
content (String) :用于匹配元素的jQuery表达式
示例
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
--------------------------------------------------------------------------------------------------------------------------------------------------
after(content)
在每个匹配的元素之后插入内容。
--------------------------------------------------------------------------------
Insert content after each of the matched elements.
返回值
jQuery
参数
content (String, Element, jQuery) : 插入到每个目标后的内容
示例
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
--------------------------------------------------------------------------------
在所有段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
--------------------------------------------------------------------------------
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>
--------------------------------------------------------------------------------------------------------------------------------------------------
before(content)
在每个匹配的元素之前插入内容。
--------------------------------------------------------------------------------
Insert content before each of the matched elements.
返回值
jQuery
参数
content (String, Element, jQuery) : 插入到每个目标前的内容
示例
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
--------------------------------------------------------------------------------
在所有段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
--------------------------------------------------------------------------------
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>
--------------------------------------------------------------------------------------------------------------------------------------------------
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面。
--------------------------------------------------------------------------------
Insert all of the matched elements after another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A, you're inserting A after B.
返回值
jQuery
参数
content (String) : 用于匹配元素的jQuery表达式
示例
在所有段落之后插入一个元素。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>
-------------------------------------------------------------------------------------------------------------------------------------------------
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。
--------------------------------------------------------------------------------
Insert all of the matched elements before another, specified, set of elements.
This operation is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B before A, you're inserting A before B.
返回值
jQuery
参数
content (String) : 用于匹配元素的jQuery表达式
示例
在所有段落之前插入一个元素。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 #Javascript
Javascript面向对象之四 继承
Feb 08 #Javascript
javascript面向对象之二 命名空间
Feb 08 #Javascript
javascript中的对象创建 实例附注释
Feb 08 #Javascript
kmock javascript 单元测试代码
Feb 06 #Javascript
一次失败的jQuery优化尝试小结
Feb 06 #Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 #Javascript
You might like
解析php中如何直接执行SHELL
2013/06/28 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
JS库之Waypoints的用法详解
2017/09/13 Javascript
解析vue中的$mount
2017/12/21 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python hashlib加密实现代码
2019/10/17 Python
python 实现多维数组(array)排序
2020/02/28 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
建筑系毕业生自我鉴定
2014/01/24 职场文书
30岁生日感言
2014/01/25 职场文书
食品安全处置方案
2014/06/14 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2015年教学工作总结
2015/04/02 职场文书
介绍信怎么写
2015/05/05 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js