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学习(二)javascript常见问题总结
Jan 02 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
详解vue 组件的实现原理
Nov 12 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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python模块WSGI使用详解
2018/02/02 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
中英文求职信范文
2014/01/27 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
周年庆典主持词
2014/04/02 职场文书
建筑结构施工求职信
2014/07/11 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL