jquery在目标节点上添加或移动节点

无忌哥哥 原创: 2018-06-29 14:26:10 924浏览

jquery在目标节点上添加或移动节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在目标节点上添加或移动节点</title>
<style type="text/css">
li {
background-color: lightskyblue;
width: 300px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<button>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
<p style="background-color: orange;width: 300px;">我是要被append()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是要被prepend()移动的节点2</li>
<p style="background-color: orange;width: 300px;">我是要被after()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被before()移动的节点4</li>
</body>
</html>

* 1.插入位置:

* 1.1:节点内容的前后

* 1.2:节点的前后

* 2.要插入的节点:

* 2.1: 对于新创建的节点:叫添加操作

* 2.2: 对已存在的节点: 叫移动操作

* 3.所以对应的应该有四个方法

* 3.1:插入到节点内容之后:append()

* 3.2:插入到节点内容之前:prepend()

* 3.3:插入到节点之后: after()

* 3.3:插入到节点之前: before() *

* 1.append()

* 语法: target.append(content)

* 参数: 要添加或移动的节点

* 功能: 插入到目标元素内容的后面

$('button').eq(0).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是append()新生成的节点1')
//第二点: 将新节点插入到目标节点内容的后面
$('ul').append(li)
//2.移动操作(请将添加操作的代码注释掉)
// $('ul').append($('p:first'))
})

* 2.prepend()

* 语法: target.prepend(content)

* 参数: 要添加或移动的节点

* 功能: 插入到目标元素内容的前面

$('button').eq(1).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var li = $('<li>').css('background-color','lightgreen').html('我是prepend()新生成的节点2')
//第二点: 将新节点插入到目标节点内容的后面
$('ul').prepend(li)
//2.移动操作(请将添加操作的代码注释掉)
// $('ul').prepend($('p:eq(1)'))
})

* 3.after()

* 语法: target.after(content)

* 参数: 要插入的节点

* 功能: 插入到目标节点的后面

$('button').eq(2).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是after()新生成的节点3')
//第二点: 将新节点插入到目标节点的后面
$('ul').after(p)
// $('li:eq(1)').after(p)
//2.移动操作(请将添加操作的代码注释掉)
// $('ul').after($('p:eq(2)'))
// $('li:eq(1)').after($('p:eq(2)'))
})

* 4.before()

* 语法: target.after(content)

* 参数: 要插入的节点

* 功能: 插入到目标元素的前面

$('button').eq(3).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var p = $('<li>').css('background-color','lightgreen').html('我是before()新生成的节点4')
//第二点: 将新节点插入到目标节点的后面
$('ul').before(p)
// $('li:eq(2)').before(p)
//2.移动操作(请将添加操作的代码注释掉)
// $('ul').before($('p:eq(3)'))
// $('li:eq(2)').before($('p:eq(3)'))
})

以上就是jquery在目标节点上添加或移动节点的详细内容，更多请关注php中文网其它相关文章！

jquery添加节点，jquery移动节点 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：关于vuex的入门介绍下一条：如何用vue快速开发app的脚手架工具