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

yohomonkey 2003-07-18 05:10:38
比如页面中已有buttom控件，
现在想点击button后在
指定的控件后面写入另外的控件。
用writeln如何不覆盖原来的控件？
...全文
132 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">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
-->
</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
  • 打赏
  • 举报
 回复
<script language="javascript">
function clicktt(obj)
{
var o = document.createElement("<a href=\"#\"></a>")
o.innerText = "rrrrq";
//1)
//hh.outerHTML = hh.outerHTML + "<a href=\"#\">rrrrq</a>";
//2) Recommended
hh.insertAdjacentHTML("afterEnd", "<a href=\"#\">rrrrq</a>");
//3)
//hh.insertAdjacentElement("afterEnd", o);
//4)
//document.body.appendChild(o);
//5)
//document.body.insertAdjacentElement("beforeEnd", o);
}
</script>
<BODY>
<input type="button" id="hh" value="Add" onclick="doAdd(this);">
</BODY>
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
  • 打赏
  • 举报
 回复
<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。
damboo 2003-07-18
  • 打赏
  • 举报
 回复
可以用document.write("控件代码")
或者写一个<div id=abc></div>
然后用abc.innerHTML="控件代码";
[精仿]360安全卫士-10.30更新(CSkin Demo)
3.添加Html编辑器控件 4.修复SkinButton图标和文本相对位置的BUG CC2013-9.26 1.优化好友列表CPU占用 2.好友列表加入好友登录平台属性：安卓 苹果 WEBQQ PC 3.优化标题绘制模式，新添标题绘制模式属性。 4.新添标题...
[精仿]QQ2013局域网通讯(10.30更新版-带最新版界面库)
3.添加Html编辑器控件 4.修复SkinButton图标和文本相对位置的BUG CC2013-9.26 1.优化好友列表CPU占用 2.好友列表加入好友登录平台属性：安卓 苹果 WEBQQ PC 3.优化标题绘制模式，新添标题绘制模式属性。 4.新添标题...
Android 在程序中动态添加 View 布局或控件
有时我们需要在程序中动态添加布局或控件等，下面用程序来展示一下相应的方法：
C# winform 动态添加控件
C# winform 动态添加控件之GroupBox和TextBox - 竹字间 - 博客园 https://www.cnblogs.com/lj1020/articles/2568885.html -------------------------------------------------------------------------------------...
html页面动态添加控件
test $(document).ready(function(){ var number = 1; $("#add_new_line").click(function(){ ...var addHtml = $('#divAdd').html() $("#fileTable").append(addHtml); number = number + 1; });
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章