添加刪除

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。