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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
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
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
实例讲解php实现多线程
2019/01/27 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python学习数据结构实例代码
2015/05/11 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python清理子进程机制剖析
2017/11/23 Python
Python之文字转图片方法
2018/05/10 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
总经理助理岗位职责
2013/11/08 职场文书
化工专业自荐书
2014/06/16 职场文书
鲁迅故里导游词
2015/02/05 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android