CODEWITHSUNDEEP
javascriptjqueryhtml
Basky
Basky

Reputation: 101

Appending a new textbox onclick of button

Am trying to write a simplest code, like onclick of button a new textbox with unique id should be assigned and appended to the existing ones.

function appendRow()
{
var x = 1;
for(var i=0; i < x; i++)
{
    var d = document.getElementById('div');
    d.innerHTML = "<input type='text' id='tst"+ x +"'><br >";
}
++x;
}

HTML:

<div id="div">
 <button onclick ="appendRow()" value="Add Row">Add Row</button>
 </div>

This might be very simple for techies.

Thanks.

Upvotes: 4

Views: 18221

Answers (1)

laaposto
laaposto

Reputation: 12213

You are replacing the button. You have to append the new div to the already created elements. Try to use += instead of =.

Also there is not need for a loop. You can assign unique id with just an inceasing var

Try:

var x=1
function appendRow()
{
   var d = document.getElementById('div');
   d.innerHTML += "<input type='text' id='tst"+ x++ +"'><br >";
}

DEMO

Upvotes: 4

Related Questions