如何使用 jQuery 将文本和按钮附加到列表项？

Question

我正在尝试制作一个非常简单的待办事项列表。你输入一些东西，它会被添加到列表中并存储在本地存储中。我的下一步是在每个列表项旁边添加一个按钮，然后我可以使用它来单独删除内容，而不是删除整个列表。我发现了几个关于使用 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>

出于某种原因，我只是从输入框和旁边的 [object Object] 中获取文本。我不太确定该怎么做，因为我无法找到有关如何使用 jQuery 以这种方式创建元素的文档。我正在尝试创建一个按钮，其 ID 与输入文本框中的文本相匹配，这样我以后可以引用该 ID 并使用它来删除内容。也许我应该采取另一种方式来解决这个问题？感谢任何帮助。

Answer 1

你在旁边得到 [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>');

如何使用 jQuery 将文本和按钮附加到列表项？

How do you append text and a button to a list item with jQuery?

jquery

list

listitem

button