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

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

wpfphp

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

阅读量439

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/wpfphp/article/details/78366302

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery中用于元素插入的四种方法：append(), prepend(), after() 和 before() 的使用方法及示例代码。这些方法能够帮助开发者高效地操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>