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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
基于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详解ASCII码对照表与字符转换
2011/12/05 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php实现的ping端口函数实例
2014/11/12 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
大学在校生求职信范文
2013/11/21 职场文书
购房意向书
2014/04/01 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
未婚证明范本
2015/06/15 职场文书
初级职称评定工作总结
2015/08/13 职场文书