jquery的DOM操作:
1、插入到节点内容之后:appendTo()
2、插入到节点内容之前:prependTo()
3、插入到节点之后: InsertAfter()
4、插入到节点之前: InsertBefore()
代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </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:lightblue">移动的节点prependto</p> <p style="background-color:lightblue">移动的节点insertAfter</p> <p style="background-color:lightblue">移动的节点insertbefore</p> </body> </html> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 1.appendTo(),插入内容到目标元素后面 // 生成节点元素,设置样式,使用appendTo插入<li>的内容后面 $('button').eq(0).on('click',function(){ var li = $('<li>').css('background-color','lightgreen').html('我是appendTo节点') li.appendTo($('ul')) }) // 2.prependTo(),移动第一个P内容,插入内容到ul的前面 $('button').eq(1).on('click',function(){ $('p:eq(0)').prependTo($('ul')) }) // 3.insertAfter(),移动第二个P内容,插入到第2个li的后面 $('button').eq(2).on('click',function(){ $('p:eq(1)').insertAfter($('li:eq(1)')) }) // 4.insertbefore(),移动第3个P内容,移到第5个li 的前面 $('button').eq(3).on('click',function(){ $('p:eq(2)').insertBefore($('li:eq(4)')) }) </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例