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); 
}

相关阅读:
FSCapture 取色工具（绿色版）
Java EE.JavaBean
Java EE.JSP.内置对象
Java EE.JSP.动作组件
Java EE.JSP.指令
Java EE.JSP.脚本
21、多态与多态性、内置方法、反射、异常处理
20、继承的应用、super、组合
19、property、绑定方法（classmethod、staticmethod）、继承
18、类

原文地址：https://www.cnblogs.com/fieldcatalog/p/5264665.html