四个点:
// 1.appendTo() 将内容动态添加到节点的最后面
//传入的参数是 $('添加的内容').appendTo('要插入最的节点')
//作用:将内容插入到目标节点内容的最后面
// 2.prependTo 将内容动态添加到节点的前面
//传入的参数是 $('添加的内容').prependTo('要插入最的节点')
//作用:将内容插入到目标节点内容的最前面
// 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
//传入的参数是 $('添加的内容').insertAfter($('节点'))
//作用:将内容插入到目标节点的后面
// 4.InsertBefore 将内容插入到目标节点之前
// 传入的参数是 $('添加的内容').InsertBefore($('节点'))
//作用:将内容插入到目标节点的前面
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id=btn1> appendTo 用法</button> <button id=btn2> prependTo 用法</button> <button id=btn2> InsertAfter 用法</button> <button id=btn2> InsertBefore 用法</button> <p> <span>前面</span> <span>后面</span> </p> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> // 1.appendTo() 将内容动态添加到节点的最后面 //传入的参数是 $('添加的内容').appendTo('要插入最的节点') //选择第一个button 并添加点击事件,将动态生成的 a 添加到 p内容的最后面 //作用:将内容插入到目标节点内容的最后面 $('button').eq(0).on('click',function(){ var a1 = $('<a href="www.baidu.com">百度一下</a>') $(a1).appendTo('p') }) // 2.prependTo 将内容动态添加到节点的前面 //传入的参数是 $('添加的内容').prependTo('要插入最的节点') //选择第二个button 并添加点击事件,将动态生成的 a 添加到 p内容的最前面 //作用:将内容插入到目标节点内容的最前面 $('button').eq(1).on('click',function(){ var a1 = $('<a href="www.baidu.com">百度一下</a>') $(a1).prependTo('p') }) // 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点 //传入的参数是 $('添加的内容').insertAfter($('节点')) //作用:将内容插入到目标节点的后面 $('button').eq(2).on('click',function(){ var a1 = $('<a href="www.baidu.com">百度一下</a>') a1.insertAfter($('p')) }) // 4.InsertBefore 将内容插入到目标节点之前 // 传入的参数是 $('添加的内容').InsertBefore($('节点')) //作用:将内容插入到目标节点的前面 $('button').eq(3).on('click',function(){ var a1 = $('<a href="www.baidu.com">百度一下</a>') a1.insertBefore($('p')) }) </script> </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例