<!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. 路飞学城Python-Day21(practise)
			
    编写程序, 如下有三点要求: 自定义用户信息数据结构, 写入文件, 然后读取出内容, 利用json模块进行数据的序列化和反序列化 e.g { "egon":{"passw ...
    
			
    2. 
						
  2. LD_DEBUG
			
    LD_DEBUG 是 glibc 中的 loader 为了方便自身调试而设置的一个环境变量.通过设置这个环境变量,可以方便的看到 loader 的加载过程. LD_DEBUG=help ./main  ...
    
			
    3. 
						
  3. Web Service 实践之 REST vs RPC
			
    作者:朱涛 出处:http://www.cnblogs.com/mindsbook/archive/2009/11/17/web_service_RESTvsRPC.html Web Service  ...
    
			
    4. 
						
  4. 【转】Retina 屏幕下，网页图片的显示兼容
			
    感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...
    
			
    5. 
						
  5. Java简述
			
    Java的特点(11个关键术语)from<Java核心技术I> 1) 简单性 2)  面向对象 3)  分布式 Java有一个丰富的例程库,用于处理像HTTP和FTP之类的TCP/IP协议 ...
    
			
    6. 
						
  6. Swoole 源码分析——进程管理 Swoole_Process
			
    前言 swoole-1.7.2 增加了一个进程管理模块,用来替代 PHP 的 pcntl 扩展. PHP自带的pcntl,存在很多不足,如 pcntl 没有提供进程间通信的功能 pcntl 不支持重定 ...
    
			
    7. 
						
  7. 洛谷P5269 欧稳欧再次学车
			
    正常模拟就好~ 首先初始化:转速=l, 档位=1 然后读入数据 由于先要处理换挡操作,所以我们先按照x处理,再按照y处理 当x=0时,档位+1,转速=l 当x=1时,档位-1,转速=r 当y=1时,转 ...
    
			
    8. 
						
  8. Spring配置文件中指定init-method属性的作用
			
    bean 配置文件属性 init-method 用于在bean初始化时指定执行方法,用来替代继承 InitializingBean接口.相关链接:https://www.cnblogs.com/Joe ...
    
			
    9. 
						
  9. 异构关系数据库（Sqlserver与Oracle）之间的数据类型转换参考
			
    一.Oracle到SqlServer的数据类型的转变 编号 Oracle ToSqlServer SqlServer 1 BINARY_DOUBLE VARCHAR(100) real 2 BINAR ...
    
			
    10. 
						
  10. (转)彻底学会使用epoll(一)——ET模式实现分析
			
    注:之前写过两篇关于epoll实现的文章,但是感觉懂得了实现原理并不一定会使用,所以又决定写这一系列文章,希望能够对epoll有比较清楚的认识.是请大家转载务必注明出处,算是对我劳动成果的一点点尊重吧 ...
    
			
    11.