如何将复选框添加到添加的列表中？

Question

项目：购物清单

我创建了一个从表单获取输入的函数。我能够显示用户输入的内容。现在我想在显示的项目旁边添加一个复选框，这样我最终可以选择检查项目并将其删除。

这是我的功能：

function addItem() {
    var item = [];
    item = document.getElementById('items-listed');
    item.innerHTML += "<li>" + document.form.itemEntered.value + "</li>";
    // item.innerHTML += "<li><input type="checkbox" />" + document.form.itemEntered.value + "</li>";
}

我试图创建复选框，但它不起作用，所以我将其注释掉。

这是在 Code Pen 中运行的项目

http://cdpn.io/JGCDB

Answer 1

应该这样做：

item.innerHTML += "<li><input type='checkbox'>" + document.form.itemEntered.value + "</li>";

你遇到的问题叫做逃逸。

您正在使用双引号在 JS 中生成一个字符串，因此如果您想在字符串中使用文字双引号，那么您需要对其进行转义，请研究以下代码：

item.innerHTML += "<li><input type=\"checkbox\">" + document.form.itemEntered.value + "</li>"; //good
item.innerHTML += '<li><input type="checkbox">' + document.form.itemEntered.value + '</li>'; //good
item.innerHTML += '<li><input type=\'checkbox\'>' + document.form.itemEntered.value + '</li>'; // good

item.innerHTML += "<li><input type="checkbox">" + document.form.itemEntered.value + "</li>"; //bad
item.innerHTML += '<li><input type='checkbox'>' + document.form.itemEntered.value + '</li>'; //bad

魔鬼总是在细节中。