How do I prevent textContent from overwriting the dynamically created span?

Question

So I'm trying to insert an element into the list but the span keeps getting overwritten by the textcontent that I'm giving to li. This is what the code is supposed to look like:

<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>

This is what I'm getting:

<li class="togglable">Add Task</li>

And here's the code:

  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);

Answer 1

To create text node 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>

Answer 2

Maybe you can add it as follow:

 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>