javascript - 使用 javascript 添加新的 到 onclick 时遇到问题

Question

我正在尝试使用 onclick 中的函数将列表元素添加到现有 ul，如下所示:

<span style="color:red;">Bob</span>

如果我在 HTML 中硬编码它，它就可以正常工作:

<ul id="LsUL">
<li><span style="color:blue;">Joe</span></li>
<li><span style="color:green;">Frank</span></li>
</ul>

但是使用函数却不起作用

function changeText2() {
  var entry = document.createElement('li');
  entry.appendChild(document.createTextNode('<span style="color:red;">Bob</span>'));
  document.getElementById("LsUL").appendChild(entry);
}
changeText2();

<ul id="LsUL">
  <li><span style="color:blue;">Joe</span></li>
  <li><span style="color:green;">Frank</span></li>
</ul>

输出应该是这样的:

• 乔(蓝色)
• 弗兰克(绿色)
• 鲍勃(红色)

但我明白了:

Joe (blue)
Frank (green)
<span style="color:red;">bob</span>

我似乎无法让它发挥作用，有什么想法吗？谢谢。

Answer 1

createTextNode 将会完全执行它听起来的操作 - 创建一个 text 节点。无论您传入什么，它总是会创建一个仅由文本组成的文本节点 - 它不会创建子元素。

元素节点可以包含文本节点，但反之则不然 - 文本节点只能包含文本以外的任何内容。

如果您想设置新li的HTML，请使用innerHTML:

var entry = document.createElement('li');
entry.innerHTML = '<span style="color:red;">Bob</span>';
list.appendChild(entry);

您还可以使用 insertAdjacentHTML 一次完成所有操作:

list.insertAdjacentHTML('beforeend', '<li><span style="color:red;">Bob</span></li>');