借助JQuery更简单实现，这里是一个用原生javascript实现的示例：
<html>
<head>巧敬
<title></title>
<scripttype="text/javascript">
functionaddButton(){
varhtml="<inputtype=\"button\"value=\"新加\"onclick=\"newButton()\">"
document.getElementById("add").innerHTML=html
}
functionnewButton(){
alert("我是新加的按钮")
}
</script>
</head>
<body>
<div>
<p>点击该按钮增加一个新按钮</p>
<inputtype="button"value="点击增加"onclick="addButton()"喊宽斗>
<p>新增的按钮在这显示</p>
<divid="add"></div>
</div>
</body>
</html>
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于郑磨原型的语言，内置支持类型。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1、创建一个元素时，使用createElement()函数2、设置元素属性可以有以下两种常用方式，首先获得具体元素的引用，
a)然后使用elementName.id=""设置她的id属性，同样可以设置name等属性，具体针对不同的页面元素有不同的属性，可以参考DHTML参考手册
b)使用setAttribute函数，elementName.setAttribute("id","elementId")
两种方式各有千秋，例如在设置class属性时就存在a)不好使用的情况，在使用中需要注意。
3、删除页面元素。删除时首先需要获得需要删除的元素的引用，然后使用removeChild函数就可以删除该元素了。必须要获得引用后才可以删除（注意）。
4、无论是创建或者删除页面元素，针对的对象是document.body。如果需要查看生成页面元素后的代码，需要使用document.body.innerHTML来查看，直接查看源文件是无法看见的。
5、设置disable属性也比较简单，只需要将其作为button对象的一个属性，设置为true就可以了。
function change_style(){
button=exist()
button.setAttribute("class","bt")//Mozilla设置class的方法
button.setAttribute("className","bt")//IE设置class的方法
/*下面的设置方法在Mozilla中有效，在IE中无效*/
//button.class="bt"
//button.className="bt"
}
<html><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html charset=gb2312"铅凳>
<script language="javascript">
LastTableID = 0
function add() {
LastTableID = LastTableID + 1
adTable = document.getElementById('atb_' + LastTableID)
if (adTable != null) {
adTable.style.display = "block"
}
else {
str = '<table id="atb_' + LastTableID + '" style="display:block">'
str = str + '<tr height="25" align=center valign=middle bgcolor=#FFFFFF>'
str = str + '<td><input type="text" name="input1_' + LastTableID + '"></td>'
str = str + '<td>--></td>'
str = str + '<td><input type="text" name="input2_' + LastTableID + '"></td>'
str = str + '<td>的距洞档离是：</td>'
str = str + '<td><input type="text" name="input3_' + LastTableID + '"></td>'
str = str + '</tr></table>'
window.upid.innerHTML += str + ''
}
}
function dellast() {
//alert(LastTableID)
if (LastTableID >0) {
deleTable = document.getElementById('atb_' + LastTableID)
if (deleTable != null) {
deleTable.style.display = "none"
LastTableID = LastTableID - 1
}
}
}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input name="Submit2" type="button"纳激乱 onclick="javascript:add()" value="增加">
<input type="button" name="del" onclick="javascript:dellast()" value="删除">
</td>
</tr>
<tr>
<td>
<div id="upid"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）