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中文網其他相關文章!