How to display console.log to html with jQuery?

Question

I am unable to show my input through html but it shows through console.log() . It is not showing up below on my list. My delete button also is not working as well. Not sure what is going on.

 $(document).ready(function(){ $('#addButton').click(function(){ var task = $(".note").val(); console.log(task); $(".todo-list").append('<li><div class ="button-center"><button id="delButton">Delete</button><button id="editButtton">Edit</button></div></li>'); }); }); $('#delButton').click(function(){ var deleteNote = $('ul').children().length; $('ul').children()[deleteNote - 1].remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <header data-role="header"><h1>To Do List</h1> <a href="#">Home</a> </header> <div role="main" class="todo-container"> <div class="input"> <input type="text" class="note" placeholder="Input new note.."> <button id="addButton">Add</button> </div> </div> <ul class="todo-list"> <li> <div class ="button-center"> <button id="delButton">Delete</button> <button id="editButtton">Edit</button> </div> </li> </ul> </body>

Answer 1

In the solution below, the task content is dynamically inserted into the HTML code; the easiest way to do this is to use `${variable}`. Improved the click event to delete the related <li><\/code> element when the delete <button><\/code> is clicked.

How to display console.log to html with jQuery?

Question

1 answers

solution1
0 ACCPTED 2022-02-06 06:03:28

How to display console.log to html with jQuery?

Question

1 answers

solution1 0 ACCPTED 2022-02-06 06:03:28

solution1
0 ACCPTED 2022-02-06 06:03:28