0

I want to make a list that you can add to, such as a grocery or todo list using jQuery's .append() and/or .prepend(). Is this possible? Or is Append()/prepend() not able to add text inputs?

I tried

HTML:
<input type="text" id="append">
<input type="submit" value="add after" id="append-to">
                <ul id="grocery-list">

                    <li>apples</li>

                </ul>

JS/JQuery:
$('#append-to').on('click', function() {
  $('#grocery-list').append("<li>$('#append')</li>");
});

Once submit is clicked, the input's text should be appended to the bottom of the list.

Instead, the string JQuery value "$('#append')" is added. The value of the text input is what should be added.

TLDR: if I type "milk" and hit submit, milk isn't added to the list. but "$('#append')" is added

Bailey West
  • 3
  • 3
  • `\`
  • ${$("#append").value}
    • \``. There are cleaner ways than using an HTML string. Here’s one entirely without jQuery: `document.getElementById("append-to").addEventListener("click", () => document.getElementById("grocery-list").append(Object.assign(document.createElement("li"), { textContent: document.getElementById("append").value })))`. Also, note that a submit button has specific semantics for `
    `s. A simple button should just have `type="button"`.
    – Sebastian Simon Nov 04 '22 at 03:08