【入门】点击按钮添加输入框

示意图：

程序步骤说明:

1、驻点：div标签

 

<div id="tags"></div>
..........
<div id="showTags"></div>

 

两个div标签的作用是标记一个驻点，好让js往页面上添加内容。换句话说就是js往页面添加内容的入口。

 

2、添加输入框

function addTags()中的

 

var str = "<input type='text' name='tagsInput' size='20' /><br />";
        document.getElementById("tags").innerHTML += str;

 

就是完成添加输入框的工作。

 

3、如何保证添加新的输入框后原来输入框中的内容能够保持？

可以在添加之前，先将原来的内容保存在一个数组中，添加完新的输入框后，再将数组中的内容还原到之前的输入框中

 

//保存之前输入框中的内容至数组中
var itemOriginal =document.getElementsByName("tagsInput");
       var arr = new Array(itemOriginal.length);
       for(var j = 0; j < itemOriginal.length;j++){
           arr[j] = itemOriginal.item(j).value;
       }
//添加输入框的语句。。。。

//还原之前输入框中的内容
var str = "<input type='text' name='tagsInput' size='20' /><br />";
       document.getElementById("tags").innerHTML += str;
       var itemNew =document.getElementsByName("tagsInput");
       for(var i=0;i<arr.length;i++)
       {
           itemNew.item(i).value = arr[i];
       }

 

---------------------------------------------------------------------------------------

完整程序：

<script type="text/javascript">
 function addTags()
    {
        var itemOriginal =document.getElementsByName("tagsInput");
        var arr = new Array(itemOriginal.length);
        for(var j = 0; j < itemOriginal.length;j++){
            arr[j] = itemOriginal.item(j).value;
        }
        
        var str = "<input type='text' name='tagsInput' size='20' /><br />";
        document.getElementById("tags").innerHTML += str;
        var itemNew =document.getElementsByName("tagsInput");
        for(var i=0;i<arr.length;i++)
        {
            itemNew.item(i).value = arr[i];
        }
    }
 function showTags(){
        var item=document.getElementsByName("tagsInput");
        for(var i=0;i<item.length;i++)
        {
            document.getElementById("showTags").innerHTML += item[i].value + " ";
        }
    }
 </script>
 <form action="" method="post">
     <input name="addTag" type="button" value="add tag" onclick="addTags()"/>
     <div id="tags"></div>
    <br />
   
    <hr />
    <input type="button" onclick="showTags()" value="show tags" />
    <div id="showTags"></div>
 </form>