<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopping list example</title> <style> li { margin-bottom: 10px; } li button { font-size: 8px; margin-left: 20px; color: #666; } </style> </head> <body> <h1>My shopping list</h1> <div> <label for="item">Enter a new item:</label> <input type="text" name="item" id="item"> <button>Add item</button> </div> <ul> </ul> <script> const btn = document.querySelector('button'); let ul = document.querySelector('ul'); let input = document.querySelector('input'); btn.addEventListener('click', () => { let v = input.textContent; let sp = document.createElement('span'); let btn2 = document.createElement('button'); sp.innerHTML = v; let u_i = document.createElement('li'); u_i.appendChild(sp); btn2.textContent = 'delete'; u_i.appendChild(btn2); input.value = ''; ul.appendChild(u_i); }); </script> </body> </html>Quiero agregar un elemento li pero sigo teniendo errores. IDK por qué, pero el contenido de texto del elemento li no se procesará y está causando errores. Este es un problema de novatos. Es bastante simple. Quiero crear una lista que agregue artículos a los elementos span/ul en HTML para generar una lista completa de artículos de compra para el cliente, de modo que, mientras compran, puedan visitar cada artículo 1 por 1 y eliminar el artículo a medida que lo recogen. en la tienda. Creo que esto será revolucionario en la forma en que los humanos crean una lista de las cosas que necesitan recordar y las borran una por una a medida que completan las cosas que deben hacer. Lo llamaré una 'lista de verificación' y espero que mi aplicación se haga pública y aparezca en la edición de NYSE para cambiar fundamentalmente la forma en que los humanos hacen la lista. Esta lista no solo se limita a las compras, sino que se puede usar para cualquier cosa en la que los humanos deban registrar varios elementos, objetos, tareas, necesidades, deseos, deberes o incluso acciones.
Use let v = input.value en lugar de let v = input.textContent; value devolverá el valor de texto del campo de entrada.