zoukankan      html  css  js  c++  java
  • 2016.3.11_JS动态创建div和span【笔记】

    1.动态创建div.

    <html>
     <body>
       <a href="javascript:click();">click here</a>
     </body>
    </html>
    <script language=javascript>
            var divId=1;
            function click()
            {
                var obj=document.createElement("div");
                obj.id="this is div "+divId +",click me";
                divId++;
                obj.style.border="2px solid #CAE1FF";
                obj.style.height="90px";
                obj.style.width="900px";          
                obj.style.margin="10px";     
                obj.innerHTML=obj.id;
               
                document.body.appendChild(obj);         
                document.getElementById(obj.id).onclick=function(){
                    document.body.removeChild(obj);  
                };           
            }  
    </script>

    2.动态创建span.

    <html>  
    <head>  
        <title></title>  
        <style type="text/css">  
            .dynamicSpan {  
                font-size: 25px;   
                color: #B22222;  
            }  
        </style>  
        <script type="text/javascript">   
            var spanId=1;
            function createSpan() {
                var spanTag = document.createElement("span");  
                spanTag.id = spanId;
                spanId++;
                spanTag.className = "dynamicSpan";  
                spanTag.innerHTML = " [this is span " +spanTag.id+"]";
     
                document.body.appendChild(spanTag);
            }  
        </script>  
    </head>  
    <body>  
        <center>    
            <input id="btn1" type="button" value="click me" onclick="createSpan();" />  
        </center>  
        <br />  
    </body>  
    </html> 

    /**
     * 动态创建span
     */ 
    function createSpan(o)
    {  
    var id = $(o).attr("id"); 
    var $usernameTd = $("#"+id).find("td:first");
    var $cnnameTd = $("#"+id).find("td:eq(2)");
    var username = $usernameTd.text();   
    var cnname = $cnnameTd.text();  
            if(usernames.length==0){
                usernames.push(username);
                chooseIds.push(id);
            }else{
                for(var i=0;i<usernames.length;i++){
                    if(usernames[i] == username){
                        return;
                    }
               } 
                usernames.push(username);
                chooseIds.push(id);
            } 
          
        var spanTag = document.createElement("span"); 
        spanTag.className = "dynamicSpan";    
        spanTag.innerHTML = cnname + " / " + username + " ";  
        var oImg = document.createElement('img');   
        oImg.src = "../res/img/item_delete.jpg";    
        
        
        oImg.onclick=
        function(){   
            for(var i=0;i<usernames.length;i++){
                if(usernames[i]==username){ 
                       usernames.splice(i,1);
                       chooseIds = deleteArrayByIndex(i,chooseIds);
                    }
            } 
            document.getElementById('selected').removeChild(spanTag);  
        };
        spanTag.appendChild(oImg);     
        spanTag.ondblclick=
        function(){   
            for(var i=0;i<usernames.length;i++){
                if(usernames[i]==username){ 
                       usernames.splice(i,1);
                       chooseIds = deleteArrayByIndex(i,chooseIds);
                    }
            } 
            document.getElementById('selected').removeChild(spanTag);   
        };
        document.getElementById('selected').appendChild(spanTag); 
    }
  • 相关阅读:
    博客园
    hdu 2071 Max Num
    函数的可选参数
    JqueryUI的使用方法
    [转]淘宝网的设计流程
    hover!= mouseover+mouseout。但hover=mouseenter + mouseleave
    转:理解Progressive enhancement
    jQuery对象和DOM对象的区别
    JS字符串的slice和splice
    内家武功招数
  • 原文地址:https://www.cnblogs.com/fieldcatalog/p/5264665.html
Copyright © 2011-2022 走看看