jQuery中几种追加元素的方法及实例代码

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