add remove <li with textbox on button click. (out of ul wrap problem) and name inputs uniquely

Question

I have an issue with js. I have form like below. Add button is adding li with input box and Remove button is removing... it is working very well. the issue is, it is creating the li after ul, out of ul :/ you can see it clearly at the screenshot below. any idea about solution? appreciate!!! thanks!!!

*

ps, how can I name the created inputs unique? now all has same name which is txt :/

*

---

JS CODE

function addTextBox() {
    var form = document.contact;
    form.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}

---

HTML CODE:

                        <li id="persons_add"><label for="persons"># of Persons Attending: *</label>

                    <table width="40%" border="1">
                        <tr>
                            <td><input type="text" name="count" value="0" class="txt_input required" style="width:20px;"  readonly ></td>
                            <td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
                            <td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
                        </tr>
                    </table>

                    </li>
                    <li class="alignRight"><input type="submit" value="Register" id="btnsend" name="btnsend" class="btn_submit" /></li>
                </ul>

---

SCREENSHOT of issue

alt text http://xs1144.xs.to/xs1144/09434/buuu851.jpg

Answer 1

Shouldn't you to append the "li" to the "ul" instead of the form ?

function addTextBox() {
    var myUl = document.getElementById('`___your_ul_id____`'); **<--- change this**
    myUl.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";
}

Answer 2

You need to append the new li to the ul, not the form element.

var ul = document.getElementById("ul_id");
ul.appendChild(document.createElement('li')).innerHTML = "Name <input type=\"text\" name=\"txt\" class=\"txt_input required\">";

Answer 3

在UL元素而不是form元素上调用appendChild。