Home >Web Front-end >JS Tutorial >jQuery insert node insertAfter and move node insertBefore usage examples

jQuery insert node insertAfter and move node insertBefore usage examples

巴扎黑Original: 2017-06-24 13:24:151687browse

This article mainly introduces the jQuery method of inserting nodes and moving nodes, and analyzes the usage skills of insertAfter and insertBefore methods for page element node operations in combination with examples. Friends can refer to the following

The examples in this article describe the method of inserting nodes and moving nodes with jQuery. Share it with everyone for your reference, the details are as follows:

1. Insert node:

<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=&#39;香蕉&#39;>香蕉</li>");  // 创建第一个<li>元素
  var $li_2 = $("<li title=&#39;雪梨&#39;>雪梨</li>");  // 创建第二个<li>元素
  var $li_3 = $("<li title=&#39;其它&#39;>其它</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=&#39;苹果&#39;>苹果</li>
  <li title=&#39;橘子&#39;>橘子</li>
  <li title=&#39;菠萝&#39;>菠萝</li>
</ul>
</body>
</html>

Rendering:

2. Mobile node:

<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=&#39;苹果&#39;>苹果</li>
  <li title=&#39;橘子&#39;>橘子</li>
  <li title=&#39;菠萝&#39;>菠萝</li>
</ul>
</body>
</html>

Rendering:

The above is the detailed content of jQuery insert node insertAfter and move node insertBefore usage examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jquery's insertBefore(), insertAfter(), prependTo(), appendTo() usageNext article：Detailed explanation of jquery's insertBefore(), insertAfter(), prependTo(), appendTo() usage

See more

jQuery insert node insertAfter and move node insertBefore usage examples

Related articles