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

【问题标题】：How do I prevent textContent from overwriting the dynamically created span?如何防止 textContent 覆盖动态创建的跨度？
【发布时间】：2022-01-28 00:08:07
【问题描述】：

所以我试图在列表中插入一个元素，但跨度不断被我提供给 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);

【问题讨论】：

记住not to post pictures of text。发布文本本身。另外：是的，这正是 textContent 和 innerHTML 分配应该做的事情：它们替换您提供的任何内容。在这种情况下，您需要 += 而不是 = 用于该 innerHTML 指令，以便您连接字符串而不是分配一个新字符串。
你忘记附加跨度了。
还有其他方法可以制作同样的“li”吗？
好的，成功了！！谢谢

标签： javascript html dom

【解决方案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>

【讨论】：

【解决方案2】：

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

const taskList = document.querySelector('ul#taskList');
const togglable = `<li class="togglable"><span class="plus-sgn">+</span> Add Task</li>`;

taskList.innerHTML += togglable;

&lt;ul id="taskList"&gt;&lt;/ul&gt;

【讨论】：