jquery 元素控制(追加元素/追加内容)介绍及应用

一、在元素内部/外部追加元素
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>

赞 (0)

相关推荐

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

  • jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • jquery 添加节点的几种方法介绍

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js"&g

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

  • jquery 元素控制(追加元素/追加内容)介绍及应用

    一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: 复制代码 代码如下: <div id="content"> <p>在我的后面追加一条新闻</p> </div> Javascript: 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ //在元素内部追加内

  • jquery 追加元素append、prepend、before、after用法与区别分析

    jquery 追加元素append、prepend、before、after用法与区别分析

    一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去:     如:A.after(B)的意思是将B放到A后面去:     before()--其方法是将方法里面的参数添加到jquery对象前面去.     如:A.before(B)的意思是将A放到B前面去:    二.insertAfter()和insertBefore()的方法的区别 其实是将元素对调位置:     可以是页面上已有元素:也可以是动态添加进来的元素.    

  • JQuery操作与遍历元素并设置其属性、样式和内容

    目录 一.操作属性 二.操作样式 三.操作元素内容 四.创建和添加元素 五.删除元素 六.遍历元素 一.操作属性 属性分类 固有属性 href.src..... 共有属性 id,class,name...... 自定义属性 abc= '1234' 操作属性的方法 区别 1.prop不能操作自定义属性 2.prop获取Boolean类型的属性是 true/false 获取属性值 attr(属性名称) 操作 checkbox 时, 获取指定的属性值,选中返回 checked,没有选中返回 undef

  • jquery动态增加text元素以及删除文本内容实例代码

    jquery动态增加text元素以及删除文本内容实例代码

    这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()

  • python追加元素到列表的方法

    本文实例讲述了python追加元素到列表的方法.分享给大家供大家参考.具体实现方法如下: scores = ["1","2","3"] # add a score score = int(raw_input("What score did you get?: ")) scores.append(score) # list high-score table for score in scores: print score 运行结

  • jQuery使用after()方法在元素后面添加多项内容的方法

    本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法.分享给大家供大家参考.具体分析如下: jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function af

  • jQuery层次选择器选择元素使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.

  • jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !dimension.horizontal) return; //won't do anything anyway if(parent) parent = self.parent(); else par

  • jQuery基本选择器选择元素使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.基本选择器:是jQuery中使用最频繁的选择器,它由元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择

  • Python list append方法之给列表追加元素

    Python list append方法之给列表追加元素

    目录 Python list append方法给列表追加元素 描述 语法 举例 注意事项 给列表list中元素添加的四种方式 1. append() 2. extend() 3. insert(index,value) 4.“+”号 Python list append方法给列表追加元素 描述 append函数可以在列表的末尾添加新的对象.函数无返回值,但是会修改列表. 语法 list.append(object) 名称 说明 备注 list 待添加元素的列表   object 将要给列表中添加

随机推荐