如何防止 textContent 覆盖动态创建的跨度？

Question

所以我试图在列表中插入一个元素，但跨度不断被我提供给 li 的文本内容覆盖。 这就是代码应该是这样的：

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

这就是我得到的：

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

这是代码：

  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

要创建文本节点，请使用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>

Answer 2

也许您可以按如下方式添加它：

 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>