Question

为什么the following code在点击add another field输入按钮时不会添加其他文字输入字段？

<html>
<head>
<script>
function add_field() 
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br> 
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>

Answer 1

根据MDN reference page，您需要致电parent.insertBefore(newElem, referenceElem)。在您的示例中，我认为<form>是父项，而不是<body>。将函数的最后一行更改为：

var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);

将使其发挥作用。

Answer 2

jQuery solution here

<form name="input" method="get">
  Put input here:<br> 
  <input id='ap' type="text" name="user">
  <input id="addField" type="button" value="Add another field"><br>
  <input id="su" type="submit" value="Submit"><br>
</form>

的JavaScript

$('#addField').click(function(e)
{
    $('<input type="text" />').insertBefore('#su')
});

为什么这个代码在单击“添加另一个字段”输入按钮时不会添加另一个字段？

2 个答案: