jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
本文实例讲述了jQuery插入节点和移动节点的方法。分享给大家供大家参考，具体如下：
1. 插入节点：
<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>"); // 创建第一个<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>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
效果图：
2. 移动节点：
<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>节点中第二个<li>元素节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点 $two_li.insertBefore($one_li); // 移动节点 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> </body> </html>
效果图：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍jQuery删除节点用法示例(remove方法)，包括了jQuery删除节点用法示例(remove方法)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery删除节点的方法。分享给大家供大家参考，具体如下： 效果图如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作
-
本文向大家介绍jQuery复制节点用法示例(clone方法)，包括了jQuery复制节点用法示例(clone方法)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery复制节点的方法。分享给大家供大家参考，具体如下： 效果图如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作js
-
我试图编写一个方法来插入一个节点和移除链表后面的一个节点。下面是我在其中编写方法的主类。它们在底部（insertBack和removeBack）： 可能有格式错误，因为我粘贴到这里，但我仍然试图找出如何使用这个网站。当我运行如下所示的驱动程序类时，我会得到如下所示的结果。 有人能帮我弄清楚为什么我的removeFront和removeBack方法不起作用吗？
-
本文向大家介绍Jquery节点遍历next与nextAll方法使用示例，包括了Jquery节点遍历next与nextAll方法使用示例的使用技巧和注意事项，需要的朋友参考一下 Jqeruy节点遍历
-
本文向大家介绍JQuery中节点遍历方法实例，包括了JQuery中节点遍历方法实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery中节点遍历方法。分享给大家供大家参考。具体如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery学习之DOM节点的插入方法总结，包括了jQuery学习之DOM节点的插入方法总结的使用技巧和注意事项，需要的朋友参考一下 本文主要总结了jQuery中DOM节点的插入方法，以及各种方法的注意点，下面话不多说，来看看详细的介绍吧。 一、内部插入append()与appendTo() append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中