jquery 元素控制(追加元素/追加内容)介绍及应用


Posted in Javascript onApril 21, 2013

一、在元素内部/外部追加元素
append,prepend:添加到子元素
before,after:作为兄弟元素添加
html:

<div id="content"> 
<p>在我的后面追加一条新闻</p> 
</div>

Javascript:
<script type="text/javascript"> 
jQuery(function(){ 
//在元素内部追加内容 
$("#content").append("<p>姚明退役了...</p>"); 
}) 
</script>

在#content里面添加元素,这是把<p>姚明退役了...</p>作为子元素添加到#content,如果想在元素外部追加元素,需要用到after,这样的话就可以把<p>姚明退役了...</p>作为兄弟元素追加到#content后面
<script type="text/javascript"> 
jQuery(function(){ 
//将span添加到追加到content1的后面 
$("#content").after("<p>姚明退役了...</p>"); 
}) 
</script>

二、在元素的不同位置追加内容
html
<div id="content1" style="border:1px solid red"> 
<p>窗前明月光</p> 
</div> 
<span>疑是地上霜</span>

javascript
<script type="text/javascript"> 
jQuery(function(){ 
//将span添加到追加到content1的后面 
$("span").appendTo("#content1"); 
}) 
</script>

三、在元素的开始位置追加内容
html
<div> 
<div id="content"> 
<p>在我的后面追加一条新闻</p> 
</div>

javascript
<script type="text/javascript"> 
jQuery(function(){ 
//在元素的开始位置追加内容 
$("#content").prepend("<p>头部</p>"); 
}) 
</script>

四、在不同元素的开始位置追加内容
html
<div id="content"> 
<p>在我的后面追加一条新闻</p> 
</div> 
<span>疑是地上霜</span>

javascript
<script type="text/javascript"> 
jQuery(function(){ 
//在不同元素的开始位置追加内容 
$("span").prependTo("#content"); 
}) 
</script>

在#content里面添加元素,这是把<span>疑是地上霜</span>作为子元素添加到#content开始地方,如果想在元素外部添加开始元素,需要用到before,这样的话就可以把<span>疑是地上霜</span>作为兄弟元素追加到#content开始了
<script type="text/javascript"> 
jQuery(function(){ 
//在不同元素的开始位置追加内容 
$("span").before("#content"); 
}) 
</script>

五、用指定结构的元素包含元素
Warp(html)
在指定的html中指定html元素,但指定的元素中不可含有兄弟元素,否则不能正常的运行,并且不含有一般文本字符串,下面的代码用div标签包含p标签
html
<form id="form1" runat="server"> 
<span>将我包含在div中</span> 
</form>

javascript
<script type="text/javascript"> 
jQuery(function(){ 
$("span").wrap("<b></b>"); 
}) 
</script>

六、用指定的元素包含多个html元素
warpAll(html)
html
<form id="form1" runat="server"> 
<p>p内容</p> 
<p>p内容</p> 
<p>p内容</p> 
<p>p内容</p> 
<p>p内容</p> 
</form>

javascript
<script type="text/javascript"> 
jQuery(function(){ 
$("p").wrapAll("<div style='border:1px solid red'><p></p></div>"); 
}) 
</script>

七、用指定的标签包含子元素
wrapInner(html)
与warp方法一样,在html中指定html元素,例如:
用b标签包含p标签中文字的代码如下:
html代码
<p>将p标签的文字用b标签包含起来</p>
<p>也将p标签的文字用b标签包含起来</p>
javascript 
<script type="text/javascript"> 
jQuery(function(){ 
$("p").wrapInner("<b></b>"); 
}) 
</script>
Javascript 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery 动态创建元素的方式介绍及应用
Apr 21 #Javascript
jQuery弹出(alert)select选择的值
Apr 21 #Javascript
jQuery登陆判断简单实现代码
Apr 21 #Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 #Javascript
Jquery submit()无法提交问题
Apr 21 #Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 #Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 #Javascript
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python模块WSGI使用详解
2018/02/02 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
python实现ping命令小程序
2020/12/28 Python
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
中海讯通笔试题
2015/09/15 面试题
小学生自我鉴定
2013/10/12 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年个人思想总结
2015/03/09 职场文书
党校培训学习心得体会
2016/01/06 职场文书
幼儿园小班教学反思
2016/03/03 职场文书