jQuery 追加元素的方法如append、prepend、before

最新推荐文章于 2024-02-07 13:23:17 发布

wpfphp

最新推荐文章于 2024-02-07 13:23:17 发布

阅读量417

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/wpfphp/article/details/78366302

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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() 方法在被选元素之前插入内容。

演示代码：

 
      <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>