还有其他类似方法，以后再加，直接上代码和图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <style>

  div{

      border:1px solid black;

  }

  #div1{

     height:100px;

	 width:100px;

	 background-color:red;

  }

  #div2{

      height:50px;

	  width:50px;

	  background-color:yellow;

  }

  </style>

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

  <script type="text/javascript">

	function append1(){

		$("#div1").append($("#div2"));

	}

	function prependTo1(){

		$("#div2").prependTo($("#div1"));

	}

	function after1(){

		$("#div1").after($("#div2"));

	}

  </script>

 </head>

 <body>

	<div id="div1">div1</div>

	--分割线--

	<div id="div2">div2</div>

	<input type="button" value="append" onclick="append1();"></input>&nbsp;

	<input type="button" value="prependTo" onclick="prependTo1();"></input>&nbsp;

	<input type="button" value="after" onclick="after1();"></input>&nbsp;

 </body>

</html>

`页面初始化


 
 
 

·append

   

 

  

·prependTo



 

·after



 

  • 大小: 3.5 KB
  • 大小: 3.3 KB
  • 大小: 3.6 KB
  • 大小: 3.5 KB

Jquery 《不想工作系列》--整理一下append、prependTo、after的区别的更多相关文章

  1. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  2. php开发面试题---jquery和vue对比（整理）

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

  3. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  4. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  6. jQuery源码分析系列(转载来源Aaron.)

    声明:非本文原创文章,转载来源原文链接Aaron. 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAa ...

  7. java学习笔记系列整理说明

    java学习笔记系列整理说明 ​ 陆陆续续也巩固学习java基础也有一段时间了,这里整理了一些我认为比较的重要的知识点,供自己或者读者以后回顾和学习.这是一个学习笔记系列,有自己的整理重新撰写的部分, ...

  8. jQuery源码分析系列——来自Aaron

    jQuery源码分析系列——来自Aaron 转载地址:http://www.cnblogs.com/aaronjs/p/3279314.html 版本截止到2013.8.24 jQuery官方发布最新 ...

  9. 原生JS研究：学习jquery源码，收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

随机推荐

  1. java8 lambda 函数式编程

    package com.atguigu.java8; import java.util.ArrayList; import java.util.Comparator; import java.util ...

  2. 【Codeforces 600C】Make Palindrome

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 计算出来每个字母出现的次数. 把字典序大的奇数出现次数的字母换成字典序小的奇数出现次数的字母贪心即可. 注意只有一个字母的情况 然后贪心地把字 ...

  3. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  4. spring历史地址

    http://repo.spring.io/release/org/springframework/spring/

  5. 最小生成树 C - Building a Space Station

    You are a member of the space station engineering team, and are assigned a task in the construction ...

  6. zoj——3624 Count Path Pair

    Count Path Pair Time Limit: 3 Seconds      Memory Limit: 65536 KB You are given four positive intege ...

  7. Spring Framework体系结构简介

    说明:以下转自Spring官方文档,用的版本为4.3.11版本. 一.引用官方文档 2.2.1核心集装箱 所述核心容器由以下部分组成spring-core, spring-beans,spring-c ...

  8. MyBatis3教程

    MyBatis3教程: http://www.yihaomen.com/article/java/302.htm http://www.mybatis.org/mybatis-3/zh/index.h ...

  9. LSN

    http://www.cnblogs.com/lyhabc/archive/2013/07/16/3194220.html

  10. LintCode-分糖果

    有 N 个小孩站成一列.每一个小孩有一个评级. 依照下面要求.给小孩分糖果: 每一个小孩至少得到一颗糖果. 评级越高的小孩能够得到很多其它的糖果. 需最少准备多少糖果? 您在真实的面试中是否遇到过这个 ...