javascript - Appending a new textbox onclick of button - Stack Overflow

admin管理员组

文章数量:1313800

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

Share Improve this question Follow asked Sep 18, 2014 at 10:52 BaskyBasky 10111 gold badge33 silver badges88 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptAppending a new textbox onclick of buttonStack Overflow