jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)用法示例(insertAfter、insertBefore方法)

2019-11-20 09:02:45

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery插入節(jié)點(diǎn)和移動(dòng)節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：

1. 插入節(jié)點(diǎn)：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){  var $li_1 = $("<li title='香蕉'>香蕉</li>");  // 創(chuàng)建第一個(gè)<li>元素  var $li_2 = $("<li title='雪梨'>雪梨</li>");  // 創(chuàng)建第二個(gè)<li>元素  var $li_3 = $("<li title='其它'>其它</li>");  // 創(chuàng)建第三個(gè)<li>元素  var $parent = $("ul"); // 獲取<ul>節(jié)點(diǎn)，即<li>的父節(jié)點(diǎn)  var $two_li = $("ul li:eq(1)"); // 獲取<ul>節(jié)點(diǎn)中第二個(gè)<li>元素節(jié)點(diǎn)  $parent.append($li_1); // append方法將創(chuàng)建的第一個(gè)<li>元素添加到父元素的最后面  $parent.prepend($li_2); // prepend方法將創(chuàng)建的第二個(gè)<li>元素添加到父元素里的最前面  $li_3.insertAfter($two_li); // insertAfter方法將創(chuàng)建的第三個(gè)<li>元素元素插入到獲取的<li>之后});//]]></script></head><body><p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p><ul>  <li title='蘋果'>蘋果</li>  <li title='橘子'>橘子</li>  <li title='菠蘿'>菠蘿</li></ul></body></html>

效果圖：

2. 移動(dòng)節(jié)點(diǎn)：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="js/jquery-1.10.1.min.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[$(function(){  var $one_li = $("ul li:eq(1)"); // 獲取<ul>節(jié)點(diǎn)中第二個(gè)<li>元素節(jié)點(diǎn)  var $two_li = $("ul li:eq(2)"); // 獲取<ul>節(jié)點(diǎn)中第三個(gè)<li>元素節(jié)點(diǎn)  $two_li.insertBefore($one_li); // 移動(dòng)節(jié)點(diǎn)});//]]></script></head><body><p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p><ul>  <li title='蘋果'>蘋果</li>  <li title='橘子'>橘子</li>  <li title='菠蘿'>菠蘿</li></ul></body></html>

效果圖：