Javascript 向清单中添加新项目

我试图创建一个清单，允许用户添加他们自己的项目

这是我的HTML的一部分：

<tr>
    <td>
        <input name="checkbox65" id="checkbox65" type="checkbox" />
    </td>
    <td>
        <label for="checkbox65">Get directions for where you are going</label>
    </td>
</tr>
 <h3>
   My items
  </h3>

<fieldset data-role="controlgroup">
    <label for="textinput4">Add new item</label>
    </td>
    <input name="new_item" id="textinput4" placeholder="" value="" type="text"
    />
</fieldset>
 <input type="submit" id="add" value="Add" />

了解你要去哪里的方向
我的物品
添加新项目

这是我的剧本：

<script>
    $('#add').on('click', function (e) {
        var $this = $(this);
        var $newRow = $this.closest('table').find('tr:first').clone();
        $newRow.find(':input').val('');
        $newRow.insertAfter($this.parent());
    });
</script>

$（'#添加'）。在（'单击'）上，函数（e）{
var$this=$（this）；
var$newRow=$this.close（'table'）.find（'tr:first'）.clone（）；
$newRow.find（':input'）.val（''）；
$newRow.insertAfter（$this.parent（））；
});

但是我没有得到任何回应。

这就是你需要的吗？ HTML

---

更新：或者可能是。

我的错，没有粘贴进去。就在它下面。我现在编辑问题。您的标记无效：您的元素不允许作为表元素的直接子元素。您应该首先更正此问题，

#add

的父元素在哪里？而那些重叠的

和

。。。解析器可能以错误的方式使用此标记。我删除了额外的标记，因为它不是必需的。当涉及到#add的父元素时，我不知道那是什么。我尽可能地将另一篇文章中的最佳答案与我自己的代码联系起来，但在他们的html中没有看到任何表示“添加”的父对象的内容。听起来这就是我的错误所在。家长是否添加了列表中由tr和td标记包围的其他项？这太棒了！我做了一个简单的调整或移动了最后一个tr和td，因为当按下add时，它克隆了所有内容，而不仅仅是复选框文本。然而，现在我面临的问题是，当按下add时，它不会将输入字段中的值添加进去，而是将原始输入“get directions for where…”添加进去，这是您正在使用的一个非常棒的网站！杰宾@用户1875549，检查。希望有帮助。演示几乎正是我想要的，只要它是发布你在文本框中写的内容，而不是原始文本。是的，你帮了很多忙！谢谢大家!@user1875549，在将新文本框插入dom之前，我已清空了该文本框，是否要将该文本框的值保留在新文本框中？

<h3>My items</h3>
<table id="myTable">
    <tr>
        <td>
            <label for="checkbox65">
                <input name="checkbox65" class="checkbox65" type="checkbox" />
                Get directions for where you are going
            </label>
        </td>
    </tr> 
    <tr><td>
    <fieldset data-role="controlgroup">
        <label for="textinput4">
            Add new item
            <input name="new_item" id="textinput4" placeholder="" value="" type="text" />
        </label>
    </fieldset>
    <button id="add">Add</button>
    </td></tr>
</table>

$('#add').on('click', function (e) {
    var $this = $(this);
    var $firstRow=$this.closest('table').find('tr:first');
    var $newRow = $firstRow.clone();
    $newRow.find(':input').prop('checked', false);
    $newRow.insertAfter($firstRow);
});