Question

我希望有一个Add another field按钮，每按一次按钮就会创建一个文本字段<input type="text" name="pet">。

我目前有this code：

<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内容？

Answer 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。

单击带有javascript的按钮添加文本字段：单击时，除文本字段外的所有内容都会消失

1 个答案: