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