您好,欢迎访问一九零五行业门户网

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

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>appendto()</button><button>prependto()</button><button>insertafter()</button><button>insertbefore()</button><p style="background-color: orange;width: 300px;">我是要被appendto()移动的节点1</li><p style="background-color: orange;width: 300px;">我是要被prependto()移动的节点2</li><p style="background-color: orange;width: 300px;">我是要被insertafter()移动的节点3</li><p style="background-color: orange;width: 300px;">我是要被insertbefore()()移动的节点4</li></body></html>
* 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)
* 参数: 要添加或移动到的节点
* 功能: 插入到目标元素内容的后面
$('button').eq(0).on('click',function(){//1. 添加操作//第一步: 生成节点元素,添加内容,并设置样式var li = $('<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 = $('<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 = $('<li>').css('background-color','lightgreen').html('我是insertafter()新生成的节点3')//第二点: 将新节点插入到目标节点的后面p.insertafter($('ul'))// p.insertafter($('li:eq(1)'))//2.移动操作(请将添加操作的代码注释掉)////移动到<ul>之后// $('p:eq(2)').insertafter($('ul'))// //移动到第2个<li>之后// $('p:eq(2)').insertafter($('li:eq(1)'))})
* 4.insertbefore()
* 语法: content.insertbefore(target)
* 参数: 要插入的节点
* 功能: 插入到目标元素的前面
$('button').eq(3).on('click',function(){//1. 添加操作//第一步: 生成节点元素,添加内容,并设置样式var p = $('<li>').css('background-color','lightgreen').html('我是insertbefore()新生成的节点4')//第二点: 将新节点插入到目标节点的后面// p.insertbefore($('ul'))//插入到第3个<li>之前// p.insertbefore($('li:eq(2)'))//2.移动操作(请将添加操作的代码注释掉)//移动到<ul>之前// $('p:eq(3)').insertbefore($('ul'))//移动到第3个<li>之前$('p:eq(3)').insertbefore($('li:eq(2)'))})
以上就是jquery将节点添加或移动到目标节点的详细内容。
其它类似信息

推荐信息