jquery将节点添加或移动到目标节点

jquery将节点添加或移动到目标节点

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

appendTo()
prependTo()
insertAfter()
insertBefore()
我是要被appendTo()移动的节点1
我是要被prependTo()移动的节点2
我是要被insertAfter()移动的节点3
我是要被insertBefore()()移动的节点4

 * 1.插入位置:

* 1.1:节点内容的前后

* 1.2:节点的前后

* 2.要插入的节点:

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

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

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

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

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

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

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

 * 1.appendTo()

* 语法: content.appendTo(target)

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

传媒公司模板(RTCMS)1.0

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

下载

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

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

* 2.prependTo()

* 语法: content.prepend(target)

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

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

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

* 3.insertAfter()

* 语法: content.after(target)

* 参数: 要插入的节点

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

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

* 4.InsertBefore()

* 语法: content.insertBefore(target)

* 参数: 要插入的节点

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

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