动态添加/删除HTML元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>WebForm2</title>

var count= 0 ;

var maxfile = 5; //最大允许数目

//增加元素

function addUpload() {

if(count >= maxfile) return; //限制最多maxfile个文件框

count++;

//每次自增id不同的HTML对象，并附加到容器最后

var newDiv = "<div id=divUpload" + count +">"

+ " <input id=file" + count + " type=file size=50 name=upload>"

+ " <a href=javascript:delUpload('divUpload" + count + "');>删除</a>"

+ " </div>";

document.getElementById("uploadContent").insertAdjacentHTML("beforeEnd", newDiv);

}

//删除指定元素

function delUpload(diva) {

count--;

document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));

}

</script>

</HEAD>

<div>

<table>

<tr>

<!--默认的file文件框

</div>

</td>

</tr>

</table>

</div>

<br/>

</form>

</body>

</HTML>

posted on 2009-05-04 22:18 黄小二阅读(594) 评论(0) 编辑收藏所属分类: Ajax

文章分类(147)


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: Javascript学习指南（第2版）笔记(六) DOM、Ajax及其数据 Javascript学习指南（第2版）笔记(五) 浏览器对象、cookie Javascript学习指南（第2版）笔记(四) 表单、表单事件及校验 Javascript学习指南（第2版）笔记(三) 排错、调试、事件捕获 Javascript学习指南（第2版）笔记(二) 对象、函数 Javascript学习指南（第2版）笔记(一) Script、数据类型和变量、操作符和语句各浏览器中javascript兼容性问题 JavaScript 脚本收集、乱码创建Tooltips方案动态添加/删除HTML元素