html中的innerHTML的用法
2011-08-24 10:10
225 查看
熟悉html标签的innerHTML属性
innerHTML属性往往有不小的应用,那么就让我们来看一下吧:1:最简单的innerHTML应用莫过如此,在html代码如下所示:
<div
id="show">
这是测试的div
</div>
<p>
</p>
<a
href="javascript:ShowWord()">点我</a>
相应的javascript如下:
<script
type="text/javascript">
function ShowWord()
{
var target=document.getElementById("show");
target.innerHTML="我被点了";
}
</script>
之后我们就会看到效果:
点了超链接后:
2:我们可以用此属性来进行一次添加多个文本框或进行多个文件的上传操作
例如,多个文本框:
Html代码还是"1"所示,相应的javasccript为:
<script
type="text/javascript">
var num=1;
function Add()
{
var addMember=document.getElementById("show");
addMember.innerHTML+="<p></p><input id='"+num+"' name='"+num+"' type='text' />";
num++;
}
function document.onkeydown()
{
//此行代码说明按tab键也可以实现文本框的增加
if(event.keyCode==9)
{
Add();
}
}
</script>
运行后,效果如下:
这样我们在客户端就可以用Reguest[“”]来获得每个文本框的值了;
3.多文件上传:
与文本框一样,多文件上传只需用html的file控件就好了,js代码如下:
<script
type="text/javascript">
function AddFiles()
{
var addFiles=document.getElementById("show");
addFiles.innerHTML+="<p><input id='File1' type='file' name='File1'/>";
}
</script>
效果图:
之后就可以在客户端用Request.Files[i]来获得每个file控件的各个属性了。
最后还有一点很重要,就是一定不要忘了html控件的name属性,如果没有写在客户端很可能就接受不到该控件的值!
还有以上效果也完全可以用js来写一个控件,再指定他的各个属性值,最后再添到某个div的子节点,这样效果会好一些,但要麻烦很多,如果只是一般的用途,用innerHTML就足够啦~~
相关文章推荐
- JS中innerHTML,innerText,outHTML的用法及区别
- outerHTML、innerHTML和innerTEXT的用法
- innerHTML,innerText,outHTML的用法及区别详解
- js innerHTML用法及错误:无法设置未定义或null引用的属性“innerHTML”解决
- javascript中innerHTML、innerText、outertHTML的区别与各自的用法
- javascript中innerHTML、innerText、outertHTML的区别与各自的用法
- js中innerHTML、outHTML和innerText的用法与区别
- js中innerHTML与innerTex、outerHTMLt的用法与区别
- html 头部正常用法
- javascript 中的innerHTML的用法
- html&JavaScript&innerHTML演练(计算器):获取HTML内容、函数、按钮(三)
- HTML之Position用法
- html<mata>标签用法总结
- innerText,innerHTML的用法以及注意事项
- $().attr()的用法 && $().html()与$().text()的区别
- 一些自学的html/javascript代码(button,text及其调用函数用法)
- innerHTML,outerHTML,innerText,outerText ,Value的区别和用法--表单 文本框不可编辑的方法
- 简述html中框架Frame和Frameset的用法
- js中innerHTML与innerText的用法与区别
- ThinkPHP的html:list标签简要用法及注意事项