我想做一个很简单的待办事项列表。 你输入一些东西，它就会被添加到列表中，并存储在本地存储中。 我的下一步是在每个列表项旁边添加一个按钮，然后我可以用它来单独删除东西，而不是删除整个列表。 我找到了几个关于用jQuery制作按钮的SO问题，并试着按照它们来做，但是有些东西不对，因为我没有得到正确的输出。 下面是代码。
<!DOCTYPE html>
<!--Project-->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
let list = [];
if (localStorage.getItem("mylist") != null) {
let array = JSON.parse(localStorage.getItem("mylist"));
for (let element of array) {
list.push(element);
$('#list').append('<li>' + element + '</li>');
}
}
$('button').click(function() {
if ((this.id) == "add") {
let input = $('#input').val();
// making button?
let button = $('<button/>', {type:'button', id:input, text:'Delete'});
// appending text and button?
$('#list').append('<li>' + input + button + '</li>');
list.push(input);
let json = JSON.stringify(list);
localStorage.setItem("mylist", json);
$('#input').val('');
}
else {
localStorage.clear();
$("#list").empty();
}
event.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" id="input" placeholder="Enter tasks...">
<button id="add">Add</button>
<button id="delete">Delete All</button>
<br>
<ul id="list">
</ul>
</form>
</body>
</html>出于某种原因，我只得到了输入框中的文本 和旁边的[对象对象]。 我真的不知道该怎么做，因为我找不到关于如何使用jQuery创建元素的文档。 我试图创建一个按钮，这个按钮的ID与输入框中的文字相匹配，这样我以后就可以引用这个ID，用它来删除东西。 也许还有其他的方法，我应该这样做？ 感谢任何帮助。
你正在得到 [object Object] 旁边，因为你是在连接一个OBJECT，而不是一个字符串（或者是一个带有你的按钮的html代码的字符串，如预期）。
// Here you are actually creating correctly the button
// making button?
let button = $('<button/>', {type:'button', id:input, text:'Delete'});
// BUT HERE you're passing the button concatenated with the string `input`. That won't work.
// appending text and button?
$('#list').append('<li>' + input + button + '</li>');
这就相当于下面的内容。
$('#list').append('<li>' + 'any text' + $('<button>') + '</li>');
正如你所看到的，你不是在连接新按钮的html代码，而是在连接一个DOM元素(实际上是一个jQuery对象，但还是...)。当你尝试连接一个 string 带着 object，javascript试图将 object 转换为表示该对象的字符串。这种情况下的转换结果是 '[object Object]'.
解决办法。
只要改变 button 的对象，到它的html代码。您可以简单地用 outerHTML DOM元素的属性。由于你的 button 对象是一个jQuery对象，而jQuery对象被视为集合，你需要在这个集合中获取第一个对象，用 [0]，然后才调用 outerHTML 属性，因为它只对标准的javascript对象有效（至少是预期的）。
// appending text and button?
$('#list').append('<li>' + input + button[0].outerHTML + '</li>');