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

相关阅读:
悄悄蒙上你的眼睛后门程序知识完全解析 java程序员
教你认识网页中五种隐形的危险病毒 java程序员
安全知识黑客是如何攻击电子邮件的 java程序员
著名黑客工具CC攻击的思路及防范方法 java程序员
Educational Codeforces Round 45 (Rated for Div. 2) G GCD Counting
Dual Palindromes
2012暑假集训内部测试赛1
hdu4380Farmer Greedy(多校3）
sdutCity Horizon（离散化）
USACO1.22Transformations

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