第一个方法：append()方法

　　　　【1】$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码，会编译成页面显示。　

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").append(" <b>Hello world!</b>");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的结尾添加内容</button>

 </body>

 </html>

　　　　【2】$(selector).append(function(index,html))//利用函数，向匹配的所有标签中的内容末尾处添加html代码。会编译成页面显示。

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").append(function(n){

       return "<b>This p element has index " + n + "</b>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的结尾添加内容</button>

 </body>

 </html>

第二个方法：appendTo()方法
 　　【1】$(content).appendTo(selector)//在匹配的标签中的内容末尾处添加html代码，会编译显示

  <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testAppendTo(){

             $("<b>我是一只狼</b>").appendTo("p");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p的结尾处添加内容" onclick="testAppendTo();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

第三个方法：after()方法

　　　　【1】$(selector).after(content)//在匹配的元素的后边添加内容，不是元素内容的后边，【而是元素结尾处，意味着添加的内容会变成兄弟标签。】

   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testAfter(){

             $("p").after("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p后边添加内容" onclick="testAfter();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

 </html>

　　　　【2】$(selector).after(function(index))//在匹配元素的后边。利用函数添加内容

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").after(function(n){

       return "<p>The p element above has index " + n + "</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素后插入内容</button>

 </body>

 </html>

第四个方法：before()方法

　　　【1】$(selector).before(content)//在匹配的元素的前边添加内容。【不是元素内容的开始处，而是意味着添加的内容会变成兄弟标签】

     <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testBefore(){

             $("p").before("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="p的前边添加内容" onclick="testBefore();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

　　　 【2】$(selector).before(function(index))//在匹配的元素的前边添加内容。利用函数的方式.

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").before(function(n){

       return "<p>The p element below has index " + n + "</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>This is a heading</h1>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button class="btn1">在每个段落前面插入新的段落</button>

 </body>

 </html>

第五个方法：clone()方法　

         【1】$(selector).clone(includeEvents)//将匹配的元素进行克隆出一个副本。includeEvents.可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").clone());

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <button>复制每个 p 元素，然后追加到 body 元素</button>

 </body>

 </html>

第六个方法：empty()方法　

      【1】$(selector).empty()//移除匹配元素的内容（包括子节点和文本内容）元素本身还存在

   <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testEmty(){

             $("p").empty();

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="移除p中的内容" onclick="testEmty();">

     <p>我isgu中国ibggyi热播</p>

     朗朗上口

   </body>

　　功能类似，但实现的目的或细节存在差异的方法：

　　【2】$(selector).remove()//移除所有匹配的元素。元素本身已经不存在

　　【3】$(selector).detach()//移除所有匹配的元素。

　　　　　　  detach() 方法移除被选元素，包括所有文本和子节点。

　　　　　　　这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

　　　　　　　detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

　　　　移动元素

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").detach());

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <button>移动 p 元素</button>

 </body>

 </html>

　　　　删除元素，还能恢复元素

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   var x;

   $("#btn1").click(function(){

     x=$("p").detach();

   });

   $("#btn2").click(function(){

     $("body").prepend(x);

   });

 });

 </script>

 </head>

 <body>

 <p>这是一个段落。</p>

 <button id="btn1">删除 p 元素</button>

 <button id="btn2">恢复 p 元素</button>

 </body>

 </html>

　　　　移动元素，并保留其click事件

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("body").append($("p").detach());

   });

  $("p").click(function(){

     $(this).animate({fontSize:"+=1px"})

   });

 });

 </script>

 </head>

 <body>

 <p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>

 <button>移动 p 元素</button>

 </body>

 </html>

第七个方法：prepend()方法　

　　　【1】$(selector).prepend(content)//方法在被选元素的开头（仍位于内部）插入指定内容。

 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").prepend("<b>Hello world!</b> ");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button>在每个 p 元素的开头插入内容</button>

 </body>

 </html>

　　　 【2】$(selector).prepend(function(index,html))//利用函数，在匹配元素的内容的开始处添加新的内容

必需。规定返回待插入内容的函数。

  • index - 可选。接受选择器的 index 位置。
  • html - 可选。接受选择器的当前 HTML。
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").prepend(function(n){

       return "<b>这个 p 元素的 index 是：" + n + "</b> ";

     });

   });

 });

 </script>

 </head>

 <body>

 <h1>这是一个标题</h1>

 <p>这是一个段落。</p>

 <p>这是另一个段落。</p>

 <button>在每个 p 元素的开头插入内容</button>

 </body>

 </html>

第八个方法：prependTo()方法

【1】$(content).prependTo(selector)//在匹配元素的开头（仍位于内部）插入指定内容。和prepend()方法功效一样，不一样在选择器和添加内容的位置
 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $(".btn1").click(function(){

     $("<b>Hello World!</b>").prependTo("p");

   });

 });

 </script>

 </head>

 <body>

 <p>This is a paragraph.</p>

 <p>This is another paragraph.</p>

 <button class="btn1">在每个 p 元素的开头插入文本</button>

 </body>

 </html>

第九个方法：replaceAll()方法

【1】$(content).replaceAll(selector)//用指定的内容替换所有的匹配元素（包括文本和子节点）






    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testReplaceAll(){

             $("<b>我是一只狼</b>").replaceAll("p");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="replaceAll" onclick="testReplaceAll();">

     <p>我isgu中国ibggyi热播</p>

     <p>sdafgyi热播</p>

     朗朗上口

   </body>








第十个方法：replaceWith()方法


【1】$(selector).replaceWith(content)//将所有匹配的元素替换成指定的内容






 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.min.js"></script>

     <script type="text/javascript">

         function testReplaceWith(){

             $("p").replaceWith("<b>我是一只狼</b>");

         }

     </script>

   </head>

   <body >

     “欢迎来到主页”

     <input type="button" value="replaceWith" onclick="testReplaceWith();">

     <p>我isgu中国ibggyi热播</p>

     <p>sdafgyi热播</p>

     朗朗上口

   </body>






【2】$(selector).replaceWith(function())//使用指定的函数替换匹配元素的内容








 <html>

 <head>

 <script type="text/javascript" src="/jquery/jquery.js"></script>

 <script type="text/javascript">

 $(document).ready(function(){

   $("button").click(function(){

     $("p").replaceWith(function(){

     return "<p>Hello World!</p>";

     });

   });

 });

 </script>

 </head>

 <body>

 <p>这是一个段落。</p>

 <p>这是另一个段落。</p>

 <button class="btn1">用新的 p 元素替换所有段落</button>

 </body>

 </html>








dsf


 


 
												


											
jquey学习2之jquery动态添加页面片段的更多相关文章
	

    
								
  1. 给Jquery动态添加的元素添加事件
		
    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
    
		
    2. 
						
  2. [转载]给Jquery动态添加的元素添加事件
		
    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
    
		
    3. 
						
  3. jquery 动态添加和删除 ul li列表
		
    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
    
		
    4. 
						
  4. jquery动态添加删除div--事件绑定,对象克隆
		
    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
    
		
    5. 
						
  5. JQuery动态添加控件并取值
		
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    6. 
						
  6. jquery 动态添加表格行
		
    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
    
		
    7. 
						
  7. jQuery动态添加删除select项
		
    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
    
		
    8. 
						
  8. jQuery动态添加删除CSS样式
		
    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
    
		
    9. 
						
  9. JQuery - 动态添加Html后，如何使CSS生效，JS代码可用？
		
    今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQLServer创建用户、数据库、表、约束、存储过程、视图
			
    --创建登录账户和数据库用户 ' exec sp_grantdbaccess 'sysAdmin','aa' --给数据库用户赋权限 grant select,update,insert,delete ...
    
			
    2. 
						
  2. Android之RecyclerView实现时光轴
			
    做项目的过程中有个需求需要时光轴,于是网上找了部分资料 ,写了个案例,现在分享给大家. 如图: activity_main.xml <?xml version="1.0" e ...
    
			
    3. 
						
  3. ural Ambitious Experiment 树状数组
			
    During several decades, scientists from planet Nibiru are working to create an engine that would all ...
    
			
    4. 
						
  4. nothing added to commit but untracked files present.
			
    当我们使用git的时候 如果我们在工作区修改了某些文件而没有新增文件,可以直接用: $ git commit --all -m "备注信息"                  -- ...
    
			
    5. 
						
  5. 24.2 网络编程基础——System.Net 命名空间
			
    使用C#进行网络编程时,通常要用到: System. Net  命名空间. System. Net. Sockets  命名空间. System. Net. Mail  命名空间. 24.2.1 Sy ...
    
			
    6. 
						
  6. 判断回文字符串（c，python）
			
    回文字符串:一个字符串,不论是从左往右,还是从右往左,字符的顺序都是一样的(如abba,abcba等) 判断回文字符串比较简单,即用两个变量left,right模仿指针(一个指向第一个字符,一个指向最 ...
    
			
    7. 
						
  7. laravel更新时区：
			
    config/app.php 'timezon'='UTC'  或 'timezone'='Asia/Shanghai'
    
			
    8. 
						
  8. PatePoco中对sql参数化时Top参数化的问题
			
    PatePoco中对sql参数化是直接用@+参数名来处理,但是想用如下语句时竟然报错了 SELECT TOP @num * FROM tableA 执行时抛出异常,根据错误提示搞了很久都没找到原因,最 ...
    
			
    9. 
						
  9. SQL 查询重复的行
			
    select * from tbsold where orderid in (select orderid from tbsold group by orderid having count(orde ...
    
			
    10. 
						
  10. (转)Secondary NameNode的作用
			
    在Hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备份.但它实际上却不是.很多Hadoop的初学者都很疑惑,S ...
    
			
    11.