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 AJAX返回的JSON结果集实现代码
Dec 10 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php学习之 循环结构实现代码
2011/06/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python3.6简单操作Mysql数据库
2017/09/12 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
python查看列的唯一值方法
2018/07/17 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python里 super类的工作原理详解
2019/06/19 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
物理系毕业生自荐信
2013/11/01 职场文书
会计系中文个人求职信
2013/12/24 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
如何写辞职信
2015/05/13 职场文书
2015年纪委工作总结
2015/05/13 职场文书
辩护意见书
2015/06/04 职场文书
军训通讯稿范文
2015/07/18 职场文书