Home > Article > Web Front-end > jquery add or move node to target node
jquery adds or moves nodes to the target node
<!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. Insertion position:
* 1.1: Before and after the node content
* 1.2: Before and after the node
* 2. Node to be inserted:
* 2.1: For newly created nodes: call the add operation
* 2.2: For existing nodes: call the move operation
* 3. So there should be four corresponding methods
* 3.1: Insert after node content: appendTo()
* 3.2: Insert before node content: prependTo()
* 3.3: After inserting into the node: InsertAfter()
* 3.3: Before inserting into the node: InsertBefore() *
* 1.appendTo()
* Syntax: content.appendTo(target)
* Parameters: The node to be added or moved to
* Function: Insert after the content of the target element
$('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()
* Syntax: content.prepend(target)
* Parameter: Node to be added or moved
* Function: Insert To the front of the content of the target element
$('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()
* Syntax: content.after(target)
* Parameters: The node to be inserted
* Function: Insert behind the target node
$('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()
* Syntax: content.insertBefore(target)
* Parameters: To Inserted node
* Function: Insert in front of the target element
$('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)')) })
The above is the detailed content of jquery add or move node to target node. For more information, please follow other related articles on the PHP Chinese website!