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

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

列表项1
列表项2
列表项3
列表项4
列表项5

append()
prepend()
after()
before()
我是要被append()移动的节点1
我是要被prepend()移动的节点2
我是要被after()移动的节点3
我是要被before()移动的节点4

* 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)

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

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

下载

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

$('button').eq(0).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var 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 = $('
').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 = $('
').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 = $('
').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)'))
})