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

魔鬼总是在细节中。

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

1 个答案: