码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作页面元素之元素插入

时间:2020-02-08 13:56:08      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:使用   uft   jquery操作   text   tle   返回   ast   多个   内容   

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操作页面元素之元素插入

标签:使用   uft   jquery操作   text   tle   返回   ast   多个   内容   

原文地址:https://www.cnblogs.com/1314bjwg/p/12276038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!