<!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暴力版
			
     编写一个函数来判断一个数是不是“快乐数”.一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,也可能是无限循环但始终变不到 1.如 ...
    
			
    2. 
						
  2. jq点击按钮打开和关闭弹出层，点击除了当前按钮以外的地方关闭弹出层
			
    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...
    
			
    3. 
						
  3. Python的流程控制
			
    条件判断 通过`if`,`elif`,`else`关键字来实现条件判断逻辑的实现,执行改结构中的其中一个,其结构如下: if condition1: pass elif condition2: pas ...
    
			
    4. 
						
  4. Unity2D 小游戏之 RocketMouse
			
    这个小游戏源自这里.这几天闲时捡了点 Unity(很久没有摸它了),顺手将这个小游戏移植到了 Unity5.5.0,除了 Parallax Scrolling 还有点小问题外,其它功能全部完整.部分代 ...
    
			
    5. 
						
  5. NuSOAP笔记：如何创建复杂数据类型
			
    PHP已经有了内置的SOAP扩展,但是它不具备自动生成WSDL的能力,所以很多时候,NuSOAP还是有一定诱惑力的. 在应用稍微复杂点的时候,单靠integer, string等简单数据类型是不能满足 ...
    
			
    6. 
						
  6. BZOJ 1396 识别子串 (后缀自动机+线段树)
			
    题目大意: 给你一个字符串S,求关于每个位置x的识别串T的最短长度,T必须满足覆盖x,且T在S中仅出现一次 神题 以节点x为结尾的识别串,必须满足它在$parent$树的子树中只有一个$endpos$ ...
    
			
    7. 
						
  7. python  dns 服务器
			
    import socketserver import struct import threading # DNS Query class SinDNSQuery: def __init__(self, ...
    
			
    8. 
						
  8. vue 过滤器使用的传参说明
			
    在table中,需要对obj的数据类型进行文字转换,例如后台接口返回的姓别值:1,2.其中需要页面根据字典需要把1=>男,2=>女进行转换. 以前的习惯是每一个过滤方法都写一个方法进行转换 ...
    
			
    9. 
						
  9. Sublime 插件Pylinter could not automatically determined the path to lint.py
			
    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50618630 安装Sublime Te ...
    
			
    10. 
						
  10. spring boot pom
			
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
    
			
    11.