Why does this code not add another field when clicking on the `add another field` input button?

Question

Why does the following code not add another text input field when clicking on the add another field input button?

<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

According to the MDN reference page , you need to call parent.insertBefore(newElem, referenceElem) . In your example, I suppose that <form> is the parent, not <body> . Changing the last line of your function to this:

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

will make it work.

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')
});

Why does this code not add another field when clicking on the `add another field` input button?

Question

2 answers

solution1
5 ACCPTED 2012-10-02 09:45:38

solution2
1 2012-10-02 09:52:33

Why does this code not add another field when clicking on the `add another field` input button?

Question

2 answers

solution1 5 ACCPTED 2012-10-02 09:45:38

solution2 1 2012-10-02 09:52:33

solution1
5 ACCPTED 2012-10-02 09:45:38

solution2
1 2012-10-02 09:52:33