如何向createTextNode添加HTML Unicode字符？现有实现无效求解决

安全阿岳

2026-5-25

解决思路：正确添加Unicode叉号到span元素

嘿，我懂你碰到的问题了——用createTextNode("✘")的时候，页面上直接显示了✘这串字符，而不是你想要的叉号✘，对吧？这是因为document.createTextNode()的核心作用就是创建纯文本节点，它不会解析任何HTML实体或者标签，只会把你传入的字符串原封不动地渲染出来，所以HTML实体在这里完全起不到作用。

下面给你几个简单有效的解决方法：

直接使用Unicode字符或转义序列
既然✘对应的是Unicode字符✘，你可以直接把这个字符写到字符串里，或者用JavaScript的Unicode转义语法\u2718：
```
// 方法1：直接写字符
span.appendChild(document.createTextNode("✘"));

// 方法2：用Unicode转义序列
span.appendChild(document.createTextNode("\u2718"));
```
这种方法最直接高效，不需要额外的解析步骤。
用innerHTML或insertAdjacentHTML解析实体
如果你必须保留✘这种实体格式，可以利用innerHTML属性（会覆盖原有内容）或者insertAdjacentHTML方法（追加内容，不覆盖原有内容），它们会自动解析HTML实体：
```
// 覆盖span原有内容
span.innerHTML = "&#x2718;";

// 在span末尾追加叉号，保留原有内容
span.insertAdjacentHTML('beforeend', '&#x2718;');
```
手动解码HTML实体（备选方案）
如果你需要动态解码实体字符串，可以借助一个临时DOM元素来完成解码，再把解码后的字符传给createTextNode：
```
function decodeHtmlEntity(entityStr) {
  const tempElement = document.createElement('div');
  tempElement.innerHTML = entityStr;
  return tempElement.textContent;
}

span.appendChild(document.createTextNode(decodeHtmlEntity("&#x2718;")));
```
不过这种方法相对繁琐，一般只在需要处理大量动态实体字符串的时候用到。