j-Query，Manipulate(操作)，append、prepend、before、after

最新推荐文章于 2022-06-28 20:36:54 发布

dsbjdq

最新推荐文章于 2022-06-28 20:36:54 发布

阅读量276

点赞数

分类专栏： jQuery 前端文章标签： j-Query

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

j-Query 对Dom元素的操作方式，使用append、prepend、before、after

简单记录一下定义：

Function 定义
append() 将元素插入在目标元素内层的最后一个
prepend() 将元素插入在目标元素内层的第一个
before() 将元素插入在目标元素的上面
after() 将元素插入在目标元素的下方
简单来看一下demo code

append()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){

      $("ul").append("<li>點部落</li>")

 });
</script>

prepend()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){

      $("ul").prepend("<li>點部落</li>")

 });
</script>

before()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){

    $("ul").children().first().before("<li>點部落</li>");

 });
</script>

after()

<ul>
   <li>yahoo</li>
   <li>google</li>
   <li>facebook</li>
</ul>

<button id="mybutton">點我加入點部落</button>


<!--　引入j-query 的部分就先不寫-->

<script>
 $("#mybutton").click(function(){

    $("ul").children().last().after("<li>點部落</li>");

 });
</script>