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.

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.

• javascript
• jquery
• html

• Aside from your code replacing the button instead of appending, what doesn't work in the code? – Ynhockey Commented Sep 18, 2014 at 10:54

1 Answer 1

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