如何在已添加列表中添加復選框？

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

魔鬼總是存在於細節中。