首页 > 技术文章 > 插入节点的方法

wenrain 2015-08-20 14:32 原文

  • 插入节点的八种方法

  下面的例子html代码为

<body>
        <ul>  我是内容   </ul>
</body>
  1. append():向每个匹配的ul元素内部追加内容B 
$("ul").append("<li>第一个li</li>")

结果:<ul>我是内容<li>第一个li</li><ul>

  2.  appendTo()匹配的内容B追加到ul元素中

$("<li>第二个li</li>").appendTo("ul")
结果:<ul>我是内容<li>第二个li</li><ul>

  3.  prepend():向每个匹配到的元素ul内容中前置内容B

 

$("ul").prepend("<li>第三个li</li>")
结果:<ul><li>第三个li</li>我是内容<ul>

 

  4.  prependTo():将需所有匹配的元素前置到指定的元素ul中

 

$("<li>第四个li</li>").prependTo("ul")
结果:<ul><li>第四个li</li>我是内容<ul>

   5. after():在匹配的元素之后插入内容

$("ul").after("<p>第5个方法</p>")
结果:<ul>我是内容<ul><p>第5个方法</p>

   6.  insertAfter():将所有匹配的元素插入到指定的内容后面。

$("<p>第六个方法</p>").insertAfter("ul")
结果:<ul>我是内容<ul><p>第六个方法</p>

   7. before():在每个匹配的元素之前插入内容

$("ul").before("<p>第七个方法</p>")
结果:<p>第七个方法</p><ul>我是内容<ul>

  8.  insertBefore(): 将所有匹配的元素插入到指定的元素前面。

$("<p>第八个方法</p>").insertBefore("ul")
结果:<p>第八个方法</p><ul>我是内容<ul>

 

推荐阅读