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

时间:2012-10-01 12:48:30

标签: javascript html

我希望有一个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内容?

1 个答案:

答案 0 :(得分: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。