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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
基于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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
Python-基础-入门 简介
2014/08/09 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python计算列表内各元素的个数实例
2018/06/29 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
中间件分为哪几类
2016/09/18 面试题
2014和解协议书范文
2014/09/15 职场文书
店长岗位职责
2015/02/11 职场文书
优质护理服务心得体会
2016/01/22 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
golang操作rocketmq的示例代码
2022/04/06 Golang