JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法

不多说废话,直接说要点

1. append(function(index, html))
该方法是版本1.4 中新增的,其功能是将一个function 函数作为append 方法的参数,该
函数的功能必须返回一个字符串,作为append 方法插入的内容,其中index 参数为对象在这
个集合中的索引值,html 参数为该对象原有的html 值。 

2.注意clone(true)和clone()的区别:

clone(true) 方法,当单击被复制的新图片时,由于它具有原图片的事务处理,因此,将在该图片的右侧出现一幅通过其复制的新图片

如果使用clone() 方法,那么只有单击原图片才可以复制新的图片元素,新复制的图片元素不具有任何功能。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
     <script src="js/jquery.js" type="text/javascript"></script>
    <!--
    <script src="http://code.jquery.com/jquery-latest.js"></script>
     -->
 <title> 动态插入节点方法</title>
 <style type="text/css">
  body{font-size:13px}
  img{border:solid 1px #ccc;padding:3px;margin:5px}
  div , span{display:block;width:200px;height:50px;border:solid 1px #ccc;background-color:#eee}
  
 </style>
 <script type="text/javascript">
  $(function() {
   $("#div1").click(function(){
    
       $("#div1").append(retHtml);// 内部插入内容append()

   });
   $("#div2").click(function(){
     
       $("#div2").after(retHtml); //外部插入内容
   
   });
   
   function retHtml() {
     var str = " <b>Write Less Do More</b> ";
     return str;
   };
   $("#img2").click(function(){
   
     $("#img1").appendTo($("#span1")); //内部插入内容appendTo()
   });
   
   $("#img1").click(function(){
   
     $("#img1").clone(true).appendTo($("#span2")); //clone(true)
     //$("#img1").clone().appendTo($("#span2")); //clone()
   });
  })
 </script>
  </head>
  <body>
   <div id="div1">给我通过append(function(index,html))增加字符串<br></div>
   <div id="div2">给我通过after(function(index,html))增加字符串<br></div>
   <span id="span1">
       <p>通过appendTo()增加下面的图片到我的后面</p>
  <img id="img2" title="2010 年新书封面" src="images/a1.gif" />
 </span>
 <span id="span2">
       <p>通过clone()将图片增加到我的后面</p>
  <img id="img3" title="2010 年新书封面" src="images/a1.gif" />
 </span>
   
   <img id="img1" title="2008 年新书封面" src="images/a2.gif" />

  </body>
</html>

你可能感兴趣的:(html,jquery,function,String,div,border)