0

我想要一个按钮，每次按下该按钮时Add another field都会创建一个文本字段。<input type="text" name="pet">

我目前有这个代码：

<html>
<head>
<script>    
function add_field() 
{
  document.write( '<input type="text" name="pet">' );
};
</script>
</head>
<body>

<form name="input" method="get">
Favourite pets:<br> 
<input type="text" name="pet">
<button type="button" onclick="add_field()">Add another field</button><br>
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

但是当我按下Add another field按钮时，我只得到一个只有一个文本字段的页面，我所有的其他内容都消失了。如何在添加另一个文本字段的同时保留其他 html 内容？

4

1 回答 1

1

这一行：

document.write( '<input type="text" name="pet">' );

将用插入的标记替换整个文档。如果要追加输入字段，则需要找到要追加的表单，创建输入字段并追加。尝试类似：

var form = document.getElementsByTagName('form')[0],
    input = document.createElement('input');

input.setAttribute('type', 'text');
input.setAttribute('name', 'pet');
form.appendChild(input);

这将input在表单的末尾插入。您可以使用其他方法，例如insertBefore将输入字段放置在您想要的位置。

或者使用 jQuery。

于 2012-10-01T12:54:53.717 回答