如何在Html中动态添加控件。

yohomonkey 2003-07-18 05:10:38

比如页面中已有buttom控件，
现在想点击button后在
指定的控件后面写入另外的控件。
用writeln如何不覆盖原来的控件？

...全文

137 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

yohomonkey 2003-07-22

打赏
举报

谢谢各位！
结贴。

yanfeng 2003-07-18

打赏
举报

这段代码是我以前做的一个单页面四则运算页面，一定能够满足你的要求
<html>

<head>
<script language="JavaScript">
var Arya = new Array(); //用于记录被运算数
var Aryfuhao= new Array(); //用于记录运算符号
var Aryb = new Array(); //用于记录运算数
var AryZhenQue = new Array(); //用于记录应该正确的结果
var AryJieGuo=new Array(); //用于记录学生填写结果
var a,b,c,i,jieguo;
var fuhao; //用于标志+,-,*,/

function ChuShi() //此函数用于初试化题目
{
i=1;
form1.DoResult.focus();
document.all.no1.innerHTML="第" + i + "条:";
Arya[i]=a=Math.floor(Math.random( )*100); //产生0--99的随机数
Aryb[i]=b=Math.floor(Math.random( )*100);
fuhao=Math.floor(Math.random( )*4); //产生0--3的随机数
document.all.no2.innerHTML=a;
switch(fuhao)
{
case 0: Aryfuhao[i]=document.all.no3.innerHTML="+";AryZhenQue[i]=a+b;break;
case 1: Aryfuhao[i]=document.all.no3.innerHTML="-";AryZhenQue[i]=a-b;break;
case 2: Aryfuhao[i]=document.all.no3.innerHTML="×";AryZhenQue[i]=a*b;break;
case 3: Aryfuhao[i]=document.all.no3.innerHTML="÷";AryZhenQue[i]=Math.round(a/b);break;
default :alert("error!");
}
document.all.no4.innerHTML=b;
document.all.no5.innerHTML="=";
}
//该函数用于记录上一题的相应情况,并且出下一题,响应页面中的"下一题"按钮
function DoNext()
{
var tmpJieGuo;
tmpJieGuo=form1.DoResult.value;
form1.DoResult.value="";form1.DoResult.focus();
if(isNaN(tmpJieGuo)||tmpJieGuo=="") alert("你输入的结果必须是整数形式");
else
{
AryJieGuo[i]=parseInt(tmpJieGuo); //parseInt()返回由字符串转换得到的整数
i++; //接着显示下一题
document.all.no1.innerHTML="第" + i + "条:";
Arya[i]=a=Math.floor(Math.random( )*100); //产生0--99的随机数
Aryb[i]=b=Math.floor(Math.random( )*100);
fuhao=Math.floor(Math.random( )*4); //产生0--3的随机数
document.all.no2.innerHTML=a;
switch(fuhao)
{
case 0: Aryfuhao[i]=document.all.no3.innerHTML="+";AryZhenQue[i]=a+b;break;
case 1: Aryfuhao[i]=document.all.no3.innerHTML="-";AryZhenQue[i]=a-b;break;
case 2: Aryfuhao[i]=document.all.no3.innerHTML="×";AryZhenQue[i]=a*b;break;
case 3: Aryfuhao[i]=document.all.no3.innerHTML="÷";AryZhenQue[i]=Math.round(a/b);break;
default :alert("error!");
}
document.all.no4.innerHTML=b;
document.all.no5.innerHTML="=";
}
}
//该函数用于显示和统计学生所有做的题目,和停留时间,响应页面中的"查看成绩"按钮
function Achievement()
{
var numAll,strOver,numRight,DeFeng,strGuLi;
numAll=AryJieGuo.length;numRight=0;
strOver="<table width='80%' border='0' align='center' cellpadding=0 cellspacing=3>";
strOver+="<tr bgcolor='#FFCC00' align=center><td>标题</td><td colspan=4 align=center>题目</td><td>正确答案</td><td>你的答案</td></tr>"
for(i=1;i<=numAll-1;i++)
{
if(AryJieGuo[i]==AryZhenQue[i]) numRight++;
strOver+="<tr><td align=center>第" + i + "条:" + "</td><td>" + Arya[i]
strOver+="</td><td align=center>" + Aryfuhao[i] +"</td><td>"+ Aryb[i]
strOver+="</td><td align=center>=</td><td align=center>" + AryZhenQue[i] + "</td><td align=center>"+ AryJieGuo[i] +"</td></tr>"
}
strOver+="</table>";
i--; DeFeng=Math.floor((numRight/i)*100);
strOver+="<p align=center>一共做" + i + "题做对:" + numRight + "题得分:" + DeFeng ;
if(DeFeng<=20) strGuLi="蠢的没药救了,算了还是回家睡觉吧!";
if(DeFeng>20 && DeFeng<50) strGuLi="白(白痴)的一塌,就知道玩!!";
if(DeFeng>=50 && DeFeng<60) strGuLi="蠢的还有救，继续努力";
if(DeFeng>=60 && DeFeng<70) strGuLi="一身冷汗！回家不会挨骂了";
if(DeFeng>=70 && DeFeng<90) strGuLi="乖孩子，再考好点给你糖吃";
if(DeFeng>=90) strGuLi="哇！天才，快赶上当年的我了";
document.all.over1.innerHTML=strOver + "<br><font color=#FF6600>" + strGuLi + "</font></p>";
document.all.btnDo.innerHTML="<input type='button' value='继续做题' onClick=window.location.reload()>"
}
</script>

</script>

<meta http-equiv="Content-Type"
content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<title>四则运算</title>
<style type="text/css">

</style>
<bgsound src="yuyun6R.mid" loop="-1">
</head>

<body onLoad="startclock();startClock1();ChuShi()" background="sybermark-back.gif" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="sybermark-temp.gif" width="737" height="164"></td>
</tr>
<tr>
<td><table border="0">
<tr>

<td width="119" height="28" align="center" valign="top">
<p>　</p>
</td>

<td valign="top" width="539"><center>
<div align="center">
<form name="clock">
<div style="font-size: 14pt;color:#FF6600;">现在时间:<input name="thetime" size="12" style="font-size: 12pt;color:#FF6600;border:0"></div>
</form>
</div>
</center></td>
<td align="center" valign="bottom" width="97"><font
color="#FFFFFF"> </font></td>
</tr>
<tr>

<td height="257">　</td>

<td valign="top">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="162" valign="top">
<form name="form1" method="post" onSubmit="return false" action="">
<div id="over1">
<div align="center"><font color="#FF6600" size="2">除法运算取四舍五入整数! </font></div>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id="no1" withd="20%" align="center"></td>
<td id="no2"></td>
<td id="no3"></td>
<td id="no4"></td>
<td id="no5"></td>
<td><input name="DoResult" type="text" id="DoResult" size="6" maxlength="6" style="border-width:1;border-style:solid;border-color:#66CCFF" onMouseOver="this.focus()"></td>
</tr>
</table>
</div>
<p align="center">
<span id="btnDo">
<input type="button" value="下一题" onClick="DoNext()">
<input type="button" value="查看成绩" onClick="Achievement()">
</span>
</p>
</form>
</td>
</tr>
</table>
<p align="center"><font size="2"><br>
</font></p>
</td>
<td>　</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

形印声传 2003-07-18

打赏
举报

楼上的才是正解！！！

wsj 2003-07-18

打赏
举报

damboo 2003-07-18

打赏
举报

应该可以吧，因为body本身就是一个对象，例如

<script language="javascript">
function clicktt()
{
window.document.body.innerHTML+="<a href=\"#\">rrrr</a>";
alert("click");
}
</script>
<BODY>
<input type="button" id="hh" value="Add" onclick="clicktt();">
</BODY>

yohomonkey 2003-07-18

打赏
举报

如果页面只有一个Button。
没有Font、span、div这些，可以先添加他们在通过他们添加其他的控件吗。

damboo 2003-07-18

打赏
举报

这样改试试

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function clicktt()
{
addHere.innerHTML="<a href=\"#\">rrrr</a>";
alert("click");
}
</script>
</HEAD>

<BODY>
<input type="button" id="hh" value="Add" onclick="clicktt();">
<span id=addHere></span>
</BODY>
</HTML>

yohomonkey 2003-07-18

打赏
举报

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function clicktt()
{
document.writeln('<a href=""#"">rrrr</a>');
alert("click");
}
</script>
</HEAD>

<BODY>
<input type="button" id="hh" value="Add" onclick="clicktt();">
</BODY>
</HTML>

但是，写入的控件覆盖了原来的Button。

yohomonkey 2003-07-18