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

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 ><span > </span> Add Task</li>

This is what I'm getting:

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

CodePudding user response：

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

CodePudding user response：

Maybe you can add it as follow:

const taskList = document.querySelector('ul#taskList');
const togglable = `<li ><span > </span> Add Task</li>`;

taskList.innerHTML  = togglable;

<ul id="taskList"></ul>