如何防止 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>