jQuery操作页面元素之元素插入
Posted 1314bjwg
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作页面元素之元素插入相关的知识，希望对你有一定的参考价值。
1：jQuery提供的append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()和insertBefore()等方法可以向文档中插入结点。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="uft-8"> 6 <title>插入结点</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 </head> 10 <script> 11 /* 12 $(选择器).append(参数1,参数n) 13 $(参数).appendTo(选择器) 14 1:选择器匹配的目标元素作为添加元素的父元素。若匹配多个元素，则同时为这些元素添加相同子结点 15 2:参数可以是HTML字符串、HTML元素、文本、数组或jQuery对象，也可以是返回这些内容的函数。 16 append()方法提供多个参数时，同时添加多个子结点。 17 */ 18 $(function() { 19 $(‘#btn‘).click(function() { 20 $(‘div‘).append(‘<b>用户名</b>‘, ‘<br>‘, ‘<h1>append方法添加</h1>‘) 21 }) 22 $(‘#btn1‘).click(function() { 23 $(‘<h2>appendTo方法添加</h2>‘).appendTo(‘.my_div1‘) 24 }) 25 }) 26 </script> 27 28 <body> 29 <div class="my_div1"> 30 顶层div 31 <div class="my_div2">子元素2</div> 32 <div class=‘my_div3‘>子元素3</div> 33 </div> 34 <button type="button" id="btn">使用append方法添加子元素</button> 35 <button type="button" id="btn1"> 使用appendTo方法添加子元素</button> 36 </body> 37 38 </html>
2：使用jQuery对象做参数
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="uft-8"> 6 <title>移动和复制现有元素</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 </head> 10 <script> 11 /* 12 $(选择器).append(参数1,参数n) 13 $(参数).appendTo(选择器) 14 1:选择器匹配的目标元素作为添加元素的父元素。若匹配多个元素，则同时为这些元素添加相同子结点 15 2:参数可以是HTML字符串、HTML元素、文本、数组或jQuery对象，也可以是返回这些内容的函数。 16 append()方法提供多个参数时，同时添加多个子结点。 17 */ 18 $(function() { 19 $(‘#btn‘).click(function() { 20 //div2被移动.注意append和appendTo的语法。 21 $(‘div1f‘).append($(‘#div2‘)) 22 }) 23 //注意移动的是参数. 24 $(‘#btn1‘).click(function() { 25 $(‘#div3‘).appendTo(‘.div2f:last‘) 26 }) 27 }) 28 </script> 29 30 <body> 31 <div class="f_div"> 32 顶层div 33 <div class="div1f">子元素1</div> 34 <div class=‘div2f‘>子元素2</div> 35 </div> 36 <div id="div2"> 37 顶层div2 38 </div> 39 <div id="div3"> 40 顶层div3 41 </div> 42 <button type="button" id="btn">使用append方法移动子元素</button> 43 <button type="button" id="btn1"> 使用appendTo方法移动子元素</button> 44 </body> 45 46 </html>
以上是关于jQuery操作页面元素之元素插入的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段