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 相关文章推荐
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
jQuery实现穿梭框效果
Jan 19 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP中遍历stdclass object的实现代码
2011/06/09 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
js中this的用法实例分析
2015/01/10 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
详解a++和++a的区别
2017/08/30 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
微信公众号token验证失败解决方案
2019/07/22 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Python list运算操作代码实例解析
2020/01/20 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
篮球比赛口号
2014/06/10 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
化妆品促销活动总结
2015/05/07 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang