添加删除

Question

我的js有问题。 我有下面的表格。 “添加”按钮正在与输入框一起添加li，而“移除”按钮正在被删除...。 问题是，它是在ul之后创建li，而在ul之后：/您可以在下面的屏幕截图中清楚地看到它。 关于解决方案有什么想法吗？ 欣赏！！！ 谢谢！！！

*

ps，如何命名创建的输入唯一？ 现在都具有相同的名称，即txt：/

*

---

JS代码

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

---

HTML代码：

                        <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>

---

发行画面

替代文字http://xs1144.xs.to/xs1144/09434/buuu851.jpg

Answer 1

您不应该将“ li”附加到“ ul”而不是格式吗？

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

您需要将新li附加到ul，而不是form元素。

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。