【入门】点击按钮添加输入框
示意图：
程序步骤说明:
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、如何保证添加新的输入框后原来输入框中的内容能够保持？
可以在添加之前，先将原来的内容保存在一个数组中，添加完新的输入框后，再将数组中的内容还原到之前的输入框中
代码
1//保存之前输入框中的内容至数组中
2var itemOriginal =document.getElementsByName("tagsInput");
3 var arr = new Array(itemOriginal.length);
4 for(var j = 0; j < itemOriginal.length;j++){
5 arr[j] = itemOriginal.item(j).value;
6 }
7//添加输入框的语句。。。。
8
9//还原之前输入框中的内容
10var str = "<input type='text' name='tagsInput' size='20' /><br />";
11 document.getElementById("tags").innerHTML += str;
12 var itemNew =document.getElementsByName("tagsInput");
13 for(var i=0;i<arr.length;i++)
14 {
15 itemNew.item(i).value = arr[i];
16 }
---------------------------------------------------------------------------------------
完整程序：
代码
1 <script type="text/javascript">
2 function addTags()
3 {
4 var itemOriginal =document.getElementsByName("tagsInput");
5 var arr = new Array(itemOriginal.length);
6 for(var j = 0; j < itemOriginal.length;j++){
7 arr[j] = itemOriginal.item(j).value;
8 }
9
10 var str = "<input type='text' name='tagsInput' size='20' /><br />";
11 document.getElementById("tags").innerHTML += str;
12 var itemNew =document.getElementsByName("tagsInput");
13 for(var i=0;i<arr.length;i++)
14 {
15 itemNew.item(i).value = arr[i];
16 }
17 }
18 function showTags(){
19 var item=document.getElementsByName("tagsInput");
20 for(var i=0;i<item.length;i++)
21 {
22 document.getElementById("showTags").innerHTML += item[i].value + " ";
23 }
24 }
25 </script>
26 <form action="" method="post">
27 <input name="addTag" type="button" value="add tag" onclick="addTags()"/>
28 <div id="tags"></div>
29 <br />
30
31 <hr />
32 <input type="button" onclick="showTags()" value="show tags" />
33 <div id="showTags"></div>
34 </form>
