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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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函数 serialize()和unserialize()
2012/02/04 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
python爬取音频下载的示例代码
2020/10/19 Python
python的数学算法函数及公式用法
2020/11/18 Python
会计专业应届生自荐信
2014/02/07 职场文书
高级编程求职信模板
2014/02/16 职场文书
三峡导游词
2015/01/31 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
企业财务管理制度范本
2015/08/04 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Golang 实现WebSockets
2022/04/24 Golang