<!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. java中端口号被占用的解决办法
			
    第一步,命令提示符号,执行命令:netstat -ano 可见,占用1099端口的进程的PID是10460. 第二步,命令提示符号,执行命令:tasklist(通过pid 10460定位) 可见,该占 ...
    
			
    2. 
						
  2. NTP同步底层实现
			
    RFC http://www.ietf.org/rfc/rfc5905.txt https://www.eecis.udel.edu/~mills/ntp/html/select.html https ...
    
			
    3. 
						
  3. vscode代码格式化 空格的配置
			
    一个项目中同事使用webstorm,看我代码的时候说我传上去的会多出空格, VSCode 编辑 Setting.json文件,列出一些可以配置的项目   "javascript.format ...
    
			
    4. 
						
  4. POJ 1988 Cube Stacking（ 带权并查集 ）*
			
    POJ 1988 Cube Stacking( 带权并查集 ) 非常棒的一道题!借鉴"找回失去的"博客 链接:传送门 题意: P次查询,每次查询有两种: M x y 将包含x的集合 ...
    
			
    5. 
						
  5. Hive学习：Hive连接JOIN用例详解
			
    1 准备数据: 1.1 t_1 01 张三 02 李四 03 王五 04 马六 05 小七 06 二狗 1.2 t_2 01 11 03 33 04 44 06 66 07 77 08 88 1.3  ...
    
			
    6. 
						
  6. Python 绘图与可视化 seaborn
			
    Seaborn是一个基于matplotlib的Python数据可视化库.它提供了一个高级界面,用于绘制有吸引力且信息丰富的统计图形. 主页:http://seaborn.pydata.org/ 官方教 ...
    
			
    7. 
						
  7. Svn 提交新文件
			
    1.右击文件: 2.按图做:
    
			
    8. 
						
  8. [luogu] P4105 [HEOI2014]南园满地堆轻絮 (贪心)
			
    P4105 [HEOI2014]南园满地堆轻絮 题目描述 小 Z 是 ZRP(Zombies' Republic of Poetry,僵尸诗歌共和国)的一名诗歌爱好者,最近 他研究起了诗词音律的问题. ...
    
			
    9. 
						
  9. 前后端交互&交互接口
			
    前后端数据交互之数据接口 废话就不多说了,我们都知道,前端通常会通过后台提供的接口来获取数据来完成前端页面的渲染. 1.前端通过接口调用后台返回的数据 <!DOCTYPE html PUBLIC ...
    
			
    10. 
						
  10. tp框架引入第三方sdk的经验总结
			
    tp框架开发常用到第三方的接口,这时候需要引入第三方的sdk.例如:微信扫码支付sdk,阿里大于的淘宝sdk等等 首先到官网上下载对应php的sdk文件,通常会有至少一个实例代码. 1 新建一个控制器 ...
    
			
    11.