码迷,mamicode.com
首页 > 移动开发 > 详细

jquery append、prepend、before等等

时间:2017-04-17 11:55:01      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:html   运行   标签   item   files   方法   href   .net   syntax   

1.jQuery append() 方法 

jQuery append() 方法在被选元素的结尾插入内容。 
实例 

复制代码代码如下:

$("p").append("Some appended text."); 



2.jQuery prepend() 方法 

jQuery prepend() 方法在被选元素的开头插入内容。 
实例 

复制代码代码如下:

$("p").prepend("Some prepended text."); 


3、after() 和 before() 方法 

jQuery after() 方法在被选元素之后插入内容。 
jQuery before() 方法在被选元素之前插入内容。 
实例 

复制代码代码如下:

$("img").after("Some text after"); 
$("img").before("Some text before"); 

 

下面脚本之家小编给补充一下

append() 方法在被选元素的结尾插入内容。

prepend() 方法在被选元素的开头插入内容。

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

演示代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
  <ul>
    <li>第一个li标签</li>
  </ul>
</div>
 
<script>
 
  //append
  $(‘.testdiv ul‘).append(‘<li>append 插入的li</li>‘);
  //prepend
  $(‘.testdiv ul‘).prepend(‘<li>prepend 插入的li</li>‘);
  //after
  $(‘.testdiv ul‘).after(‘<li>after 插入的li</li>‘);
  //before
  $(‘.testdiv ul‘).before(‘<li>before 插入的li</li>‘);
 
</script>

运行后效果图:

技术分享

html结构图

技术分享

jquery append、prepend、before等等

标签:html   运行   标签   item   files   方法   href   .net   syntax   

原文地址:http://www.cnblogs.com/as3lib/p/6721874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!