<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

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

    <style type="text/css">

        *{margin:0px;padding:0px;}

        body{font-size:12px;}

        .box{margin:10px;padding:10px;}

        .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}

        .box p{line-height:20px;}

        #allbox{margin:10px;padding:10px;}

        #allbox div{border:5px solid #aaccff;margin-top:10px;height:30px;}

    </style>

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

    <script type="text/javascript">

        $(function(){

            var a = "<div></div>"

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

                $("#allbox").append(a)

            })

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

                 $("#allbox").prepend(a)

            })

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

                 $("#box2").before(a)

            })

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

                 $("#box2").after(a)

            })

        })

    </script>

</head>

<body>

    <div class="box">

        <h3>试题要求</h3>

        <p>

            <input type="button" value="在allbox内部的底部插入一个div" id="btn1" />

            <input type="button" value="在allbox内部的顶部插入一个div" id="btn2"/>

            <input type="button" value="在box2前面插入一个div" id="btn3"/>

            <input type="button" value="在box2后面插入一个div"id="btn4" />

        </p>

    </div>

    <div id="allbox">

        <div id="box1">#box1</div>

        <div id="box2">#box2</div>

        <div id="box3">#box3</div>

    </div>

</body>

</html>



												


											
【jQuery01】添加添加div的更多相关文章
	

    
						
  1. 使用yii的layout，加入<?php echo $content; ?>这句话时，它会自动在子页面上面添加一个div包裹
		
    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...
    
		
    2. 
						
  2. JavaScript高级 面向对象（1）--添加一个div标签
		
    说明(2017.3.28): 1. JavaScript是一种基于对象的多范式编程语言,不是面向对象,但离开对象不能活. 范式编程是指编程习惯.方式,分为过程式.对象式和函数式编程. 2. 面向对象是 ...
    
		
    3. 
						
  3. Ajax获取网页添加到div中
		
    1:利用DOM获取该 div 的 ID,然后清空该DIV的内容(如果你需要接着里面的内容添加可不要清空):需要注意点是清空最好用“ empty()  ”: 2: 把  async设成true ,否则又 ...
    
		
    4. 
						
  4. h5 页面点击添加添加input框
		
    h5 页面点击添加添加input框 前段时间有个需求,页面要能点击添加按钮控制input框的个数,当时感觉有点难,就没做,这两个又遇到了,没办法写了个简单的 效果图,加号增加,减号减少 直接上代码,  ...
    
		
    5. 
								
  5. JS添加删除DIV
		
    function addDiv(w,h){     //如果原来有“divCell”这个图层,先删除这个图层    deleteDiv();    //创建一个div       var my = d ...
    
		
    6. 
						
  6. JavaScript在div后添加删除div
		
    var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !==  ...
    
		
    7. 
						
  7. 复杂表格的树形结构的添加删除行div实现
		
    公司倒闭,换了工作,无奈选择了做外包这个差事,大公司进不去,小公司工资太低,可能也只能如此了.但无奈之举,亦不可浪费时间,多多磨练自己吧! 众所周知,做外包项目,其实就是做一些大公司的内部系统,多以管 ...
    
		
    8. 
						
  8. 使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）
		
    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
    
		
    9. 
						
  9. 全选或者单选checkbox的值动态添加到div
		
    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. hdu2614 Beat
			
    题意: 有n个问题. 给出你解决完第i个问题之后解决j问题所花的时间,花的时间越多表示难度越大,每次只能解决难度大于或等于上个题难度的问题.问你最多能解决多少问题. 他妈的,第一次做想半天想不出来如何 ...
    
			
    2. 
						
  2. CF1037E Trips (离线+图上构造)
			
    题目大意:一共有n个人,每天早上会有两个人成为朋友,朋友关系不具有传递性,晚上,它们会组织旅游,如果一个人去旅游,那么他不少于$k$个朋友也要和他去旅游,求每天的最大旅游人数 一开始并没有想到反向建图 ...
    
			
    3. 
						
  3. myEclies项目导入Eclipse中常见问题
			
    需要配置Tomcat 左上方菜单 windosw > Prefrences TomCat JS文件报错 打开项目位置 找到 这个文件打开 删除这一段ok
    
			
    4. 
						
  4. 用pycharm运行django项目
			
    [点击]run -> Edit Configrations 弹出如下页面 点击“+” 点击Django server 在弹出页面的host填0.0.0.0 点击这个“文件夹” 点击‘+’后填下面 ...
    
			
    5. 
						
  5. Codecademy网站安利 及 javaScript学习
			
    今天发现一个Code教学网站,号称可以利用零碎时间来学习些代码. codecademy (https://www.codecademy.com)
    
			
    6. 
						
  6. ASP.NET-EF基础知识
			
    定义 asp.net Entity Framework是微软以ADO.NET为基础发展出来的对象关系对应(OR Mapping)解决方案.   三种EF工作模式(自己理解的) 从数据库表创建类 从类创 ...
    
			
    7. 
						
  7. SQL SERVER-in,between,like
			
    and 1 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式 ( 可以使用正则表达式) select * from [User] where UserName like '%r' -- 以 ...
    
			
    8. 
						
  8. [AngularJS]Chapter 3 使用AngularJS构建应用程序
			
    本章内容提要: 如何布置AngularJS进行快速开发 开启服务器进行测试 使用Karma进行单元测试用例测试 编译压缩AngularJS进行生产 使用Batarang进行Debug 如何简化开发工作 ...
    
			
    9. 
						
  9. Android源代码解析之（七）--&gt;LruCache缓存类
			
    转载请标明出处:一片枫叶的专栏 android开发过程中常常会用到缓存.如今主流的app中图片等资源的缓存策略通常是分两级.一个是内存级别的缓存,一个是磁盘级别的缓存. 作为android系统的维护者 ...
    
			
    10. 
						
  10. 【面试】-Java基础知识
			
    1.Java的工作原理 1) Java源程序(.java)须要通过编译器编译成字节码(.class)文件; 2) Java程序的跨平台主要指字节码能够在不论什么具有Java虚拟机的设备上运行: 3)  ...
    
			
    11.