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