你好,欢迎访问我的博客!登录 读者墙 文章归档 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 君子好学,自强不息!

jQ中几种追加元素的方法

2017-02-27JS/JQ墨初924°c
A+ A-

在互联网的世界中几乎所有的网站都要用到JS,但有时候JS操作起来不是很方便,那么我们可以利用JQ插件对网页的DOM树节点进行操作,正好现在本博主也正自学JQ的操作,下方记录几种JQ如何追加元素的方法。

append() 方法 

append() 方法是在被选定元素的内容的结尾后,追加元素

代码:

$("p").append("Some appended text."); 
//追加字段
$("body").append("<div class="class"></div>"); 
//追加HTML代码(注意,HTML代码中不能有空格)

prepend() 方法 

prepend() 在被选定的元素内容的开始处追加代码

代码:

$("p").prepend("Some appended text."); 
//追加字段
$("body").prepend("<div class="class"></div>"); 
//追加HTML代码(注意,HTML代码中不能有空格)

after() 和 before() 方法 

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

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

代码如下:

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

具体实例:

代码:

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

结果:

jQ中几种追加元素的方法

总结:通过JQ对网页的DOM节点进行操作是不是很简单呢?

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
QR:  jQ中几种追加元素的方法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。


  登录