jQ中几种追加元素的方法

来源:  时间:2017-09-16    阅读:   我要吐槽    阿里云幸运券

在互联网的世界中几乎所有的网站都要用到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节点进行操作是不是很简单呢?

Tags:追加元素  jQ代码  

参与讨论