html中的innerHTML的用法

 

熟悉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就足够啦~~