javascript动态添加div


javascript动态添加div

 网上有很多的实现js动态添加div的方法,在这里我展示一种使用insertBefore(),和innerHTML方式。
前台代码
 
<span style="font-size:18px;"><!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>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>js动态添加div</title>  
</head>  
<script type="text/javascript"  src="js动态添加div.js"></script>  
  
<body>  
    <form>  
        <div οnclick="getDIV()" ><a href="#">获得question下的所有div</a>v</div>  
        <div id="ceshi" οnclick="createQuestion('question_danxuan')" ><a href="#">动态添加div</a></div>  
        <div>  
            <div id="sur" class="survey">  
                <div>  
                    <div id="question" class="surveycontent"></div>  
                </div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>  
  
              </span>  
 
js代码
 
<span style="font-size:18px;">  function createQuestion(tixing){      
        //1.先判断在需要插入的位置是否存在子节点div  
        var oTest = document.getElementById("question");//获得所有子节点的父节点     
        var flag = oTest.hasChildNodes();//判断当前节点是否拥有子节点  
        if(flag == false){//不存在其他节点  
        //2.当不存在---插入第一个节点  
            var obj1 = document.createElement("DIV"); //创建DIV  
            //将obj1插入到对应的位置  
            //1.取得需要插入的位置的上一个节点  
            var obj1Parent = document.getElementById("question");  
            //2.将obj1插入到这个节点下面  
            //obj1Parent.innerHTML="<div class="ceshi ceshi2 " style="color:red">插入的第一个div</div>"; //插入第一个div  
            obj1Parent.innerHTML="<div id=" + tixing + ">插入的第一个div</div>"; //插入第一个div  
        }else{//存在其他的节点  
        //3.当已经存在---插入其他节点  
            //3.1.创建需要插入的新节点  
            var newNode = document.createElement("div");  
            var objDivs = oTest.getElementsByTagName("DIV");  
            var sum = objDivs.length + 1;  
            var reforeNode = objDivs[objDivs.length-1]  
            newNode.innerHTML = "添加的div" + sum;  
            //3.2.取得插入位置后面的节点---存在节点最后一个节点  
            //var reforeNode = document.getElementById("question_danxuan");  
            //3.3.实现插入函数  
            oTest.insertBefore(newNode,reforeNode.nextSibling);  
        }  
    }  
    function getDIV(){  
        var obj = document.getElementById("question");  
        var objDivs = obj.getElementsByTagName("DIV");  
        alert(objDivs.length);  
        for(i=0;i<objDivs.length;i++){     
              
        }  
    }</span>  

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值