Entonces, estoy tratando de insertar un elemento en la lista, pero el contenido de texto que le estoy dando a li sigue sobrescribiendo el lapso. Así es como se supone que debe verse el código:
<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>Esto es lo que obtengo:
<li class="togglable">Add Task</li>Y aquí está el código:
const togglable = document.createElement('li'); const span = document.createElement('span'); togglable.className = 'togglable'; span.className = 'plus-sgn'; span.textContent = '+'; togglable.appendChild(span); togglable.textContent = 'Add Task'; taskList.appendChild(togglable);Para crear un nodo de texto, usedocument.createTextNode :
function add() { const togglable = document.createElement('li'); togglable.className = 'togglable'; const span = document.createElement('span'); span.className = 'plus-sgn'; span.textContent = '+'; togglable.appendChild(span); //append text as text node togglable.appendChild(document.createTextNode('Add Task')); taskList.appendChild(togglable); } add(); add(); add(); <ul id='taskList'> <li>Abc</li> </ul>Tal vez puedas agregarlo de la siguiente manera:
const taskList = document.querySelector('ul#taskList'); const togglable = `<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>`; taskList.innerHTML += togglable; <ul id="taskList"></ul>