jQuery插入节点,移动节点

简介:
<script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素


    var $parent = $("ul");                             // 获取<ul>节点,即<li>的父节点
    var $two_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
   
    $parent.append($li_1);                 //  append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);                 //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
    $li_3.insertAfter($two_li);               //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  });
  //]]>
  </script>
复制代码
复制代码
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
    var $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
    var $two_li = $("ul li:eq(2)");             //  获取<ul>节点中第三个<li>元素节点
    $two_li.insertBefore($one_li);    //移动节点
  });
  //]]>
  </script>



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/09/06/2673813.html,如需转载请自行联系原作者
相关文章
|
10月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
|
9月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
10月前
|
JavaScript
jQuery遍历节点的方法
jQuery遍历节点的方法
57 0
|
JavaScript 前端开发
前端基础 -JQuery 插入节点
前端基础 -JQuery 插入节点
93 1
|
JavaScript 前端开发
前端基础 -JQuery 删除节点
前端基础 -JQuery 删除节点
68 0
|
JavaScript
jQuery 节点操作(增删改查)
jQuery 节点操作(增删改查)
62 0
|
XML JavaScript 数据格式
JQuery 动态XML字符串添加节点
今天实现了动态的给一个XML字符串添加节点。
163 0
|
JavaScript 索引
jquery 获取元素(父节点,子节点,兄弟节点)
jquery 获取元素(父节点,子节点,兄弟节点)
|
JavaScript
jQuery节点操作、弹幕案例
jQuery节点操作、弹幕案例
146 0
jQuery节点操作、弹幕案例
|
JavaScript
jQuery入门第三章(JQ 节点操作)
jQuery入门第三章(JQ 节点操作)
103 0