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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
详解Vue方法与事件
Mar 09 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
如何用JavaScipt测网速
May 09 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
npm的lock机制解析
2019/06/20 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
详解PyTorch批训练及优化器比较
2018/04/28 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python xlwt模块使用代码实例
2020/06/10 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
什么是java序列化,如何实现java序列化
2012/11/14 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
药学专业大学生自荐信
2013/09/28 职场文书
商场活动策划方案
2014/01/24 职场文书
《春雨》教学反思
2014/04/24 职场文书
滞留工资返还协议书
2014/10/19 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书