<!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. JS判断客户端是否是iOS或者Android或者ipad（二）
			
    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...
    
			
    2. 
						
  2. CSS隐藏overflow默认滚动条同时保留滚动效果
			
    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...
    
			
    3. 
						
  3. nodejs安装与概述
			
    第一部分:安装与测试 1 官方下载地址 https://nodejs.org/en/ 2 测试是否安装成功? window下打开CMD窗口   输入:node -v  => 显示安装的nodej ...
    
			
    4. 
						
  4. java缓冲区BufferedReader
			
    1.java缓冲区BufferedReader拷贝文件 2.代码如下: package Demo1; import java.io.*; public class BufferedTest { pub ...
    
			
    5. 
						
  5. UVALive 5545 Glass Beads
			
    Glass Beads Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Origin ...
    
			
    6. 
						
  6. ZJU 2671 Cryptography
			
    Cryptography Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...
    
			
    7. 
						
  7. Java二维码打印
			
    http://blog.csdn.net/OnePersonTZ/article/details/66560513
    
			
    8. 
						
  8. POJ 3904
			
    第一道莫比乌斯反演的题. 建议参看http://www.isnowfy.com/mobius-inversion/ 摘其中部分 证明的话感觉写起来会比较诡异,大家意会吧说一下这个经典题目:令R(M,N ...
    
			
    9. 
						
  9. 手写一个节点大小平衡树（SBT）模板，留着用
			
    看了一下午,感觉有了些了解.应该没有错,有错希望斧正,感谢 #include<stdio.h> #include<string.h> struct s { int key,le ...
    
			
    10. 
						
  10. firefox 被劫持hao123 主页
			
    快捷方式没有问题 也不是ff的配置文件里user.js的问题 是haozip的问题 最后查到是windows/system/Hao*.sys 这个文件的问题(还有zolsoft.sys) 删除这个文件 ...
    
			
    11.