$(function(){ var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); // 创建第三个<li>元素 var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点 var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $("#btn_1").click(function(){ $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示 }); $("#btn_2").click(function(){ // 可以采取链式写法：$parent.append($li_1).append($li_2); $parent.append($li_2); }); $("#btn_3").click(function(){ // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后 $li_3.insertAfter($two_li); }); });
也利用它们对原有的DOM元素进行移动：
$(function(){ var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点 $two_li.insertBefore($one_li); //移动节点 });