[英]How do I prevent textContent from overwriting the dynamically created span?
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.所以我试图在列表中插入一个元素,但跨度不断被我提供给 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);
To create text node usedocument.createTextNode :要创建文本节点,请使用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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.