<html>
<head>
<style type="text/css">
#upload{
TEXT-ALIGN: left;BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 6em; PADDING-LEFT: 15px; BACKGROUND: #f1f3f5; PADDING-BOTTOM: 15px; MARGIN-LEFT: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 430px; MARGIN-RIGHT: auto; PADDING-TOP: 15px; BORDER-BOTTOM: #cccccc 1px solid;font-size:12px;
}
#ctrl{TEXT-ALIGN: center;}
</style>
<title>
动态加入span效果
</title>
<script>
function $(pKey){
return document.getElementById(pKey);
}
var i=4;
function add_file(){
var span = document.createElement('span');
var fileid = 'temp_file'+i;
span.setAttribute('id',fileid);
span.innerHTML = "<input type='text' name ='f"+fileid+"' value=''></input><a href=javascript:delete_file('"+fileid+"')>dele</a><br>";
document.getElementById("message").appendChild(span);
i++;
}
function delete_file(pNode){
var obj = $(pNode);
$("message").removeChild(obj);
}
</script>
<noscript>您的浏览器不支持JavaScript。</noscript>
</head>
<body>
<div id="ctrl">
<div id="message">
</div>
<a href="javascript:add_file()">添加</>
<a href="javascript:alert(document.getElementById('message').innerHTML)">查看</>
</div>
</body>
</html>