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>
    
<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="data:images/a1.gif" />
</span>
<span id="span2">
     <p>通过clone()将图片增加到我的后面</p>
  <img id="img3" title="2010 年新书封面" src="data:images/a1.gif" />
</span>

<img id="img1" title="2008 年新书封面" src="data:images/a2.gif" />

</body>
</html>

JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法相关推荐

jQuery中append()和appendTo()的区别
[前言] 简单总结下jQuery中append()和appendTo()的区别 [主体] 1.简单理解 (插入对象不同) append()前面是被插入的对象,后面是要在对象内插入的元素内容 appen ...
jQuery中append、insertBefore、after与insertAfter方法注意事项
jQuery中append.appendTo.prepend.prependTo.before.insertBefore.after与insertAfter方法注意事项这里列的是针对初学jQuery ...
jquery中append与appendTo方法区别
1. append(content)方法方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...
jQuery中append、prepend等的用法与记忆
jQuery中,有append.prepend等方法,容易搞混淆,在这里记录一下,以便于区分大致有如下方法,可以理解为: append:后置x(-后面添加) prepend:前置x (-前面添加) ...
jQuery中append()、prepend()与after()、before()的区别
原文地址:https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append().prepend()和 after().be ...
html中prependid的作用,jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素的方法有append(),prepend和 after(),before()两种共四个.但很多人对他们的使用有点混淆,今天就来分析一下.append()和prepend()的 ...
jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项...
这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法源包装集/字串目标包装集体特性描述 A.append(B) B A 若目标包装集 ...
JQuery中append()和appendTo()方法
$(x).append(y)方法:在每个所选择的元素x内部的末尾处插入内容y <!DOCTYPE html> <html><head><meta charse ...
jquery中append、prepend、before、after方法使用
一.after()和before()方法的区别 after()--其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before()- ...

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

JQuery中append(function(index,html)),appendTo(),after(function(index,html)),clone()方法相关推荐

最新文章

热门文章