jquery节点操作
1、节点操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #hd{ width: 600px; height: 500px; border: 2px solid blue; } </style> <script src="jquery-1.11.3.min.js.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#dd').click(function(){ // 创建一个新的h2标签 // 在jquery中创建新标签只需要将标签最终的代码写成字符串形式即可 // var newH = '<h2 class="hd">我是新来的！</h2>'; //// 将新创建的标签追加到box里 append:添加,在#box里面一堆h2标签后面加 // $('#box').append(newH); // (第1种写法)把#aa追加进#box里面的最后 // $('#box').append($("#aa")); // (第2种写法) 将#aa加进#box里面的最后 // $('#aa').appendTo($("#box")); //// 从头部追加 // $("#box").prepend($('#aa')); //// prependTo也是从头部追加 反过来写 // $("#aa").prependTo($('#box')); // // 插队:中间插入 // after:后面 在eq(1)后面插入 // $("#box h2").eq(1).after($("#aa")); //// 插队:中间插入反过来写法和上面的效果一样的 // $("#aa").insertAfter($("#box h2").eq(1)); // 插队:中间插入 // before:前面 在eq(1)前面插入 // $("#box h2").eq(1).before($("#aa")); // 和上面的一样,位置倒过来写 $("#aa").insertBefore($("#box h2").eq(1)); }) }) </script> </head> <body> <h1 id="aa">这个是h1标签</h1> <input type="button" name="" id="dd" value="来点我呀" /> <br /><br /> <div id="box"> <h2>如果你是工作经验小于2年的朋友0</h2> <h2>如果你是工作经验小于2年的朋友1</h2> <h2>如果你是工作经验小于2年的朋友2</h2> <h2>如果你是工作经验小于2年的朋友3</h2> <h2>如果你是工作经验小于2年的朋友4</h2> <h2>如果你是工作经验小于2年的朋友5</h2> <h2>如果你是工作经验小于2年的朋友6</h2> </div> </body> </html> 上面代码效果图片
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知