如何用JavaScript创建span元素实现局部文本设为手写体样式？

你说得对，用document.createElement("span")完全能搞定这个需求！直接给textContent赋值的话没法单独给某个单词加样式，所以我们得把内容拆成普通文本和带样式的span元素，再把它们组合到目标元素里。

下面是具体的实现代码：

// 获取目标元素
const demoElement = document.querySelector("#demo");

// 创建普通文本节点："A quote and one word has to be "
const regularText = document.createTextNode("A quote and one word has to be ");

// 创建span元素包裹需要变手写体的单词
const cursiveSpan = document.createElement("span");
// 设置span的手写体样式
cursiveSpan.style.fontFamily = "cursive";
// 给span添加目标单词
cursiveSpan.textContent = "cursive";

// 把普通文本和span依次添加到demo元素中
demoElement.appendChild(regularText);
demoElement.appendChild(cursiveSpan);

思路拆解 #

• 没有直接给demoElement.textContent赋值，而是把内容拆成纯文本节点和带样式的span元素，这样就能单独控制单个单词的样式，不影响整体文本。
• document.createTextNode()用来生成纯文本内容，和直接用textContent的效果一致，不会被解析成HTML标签。
• 给span设置fontFamily: "cursive"就能让里面的文字变成手写体，其他文字保持原有样式。

如果你的文本更长、需要替换多个单词，还可以用字符串拆分的方式动态生成元素，比如：

const demoElement = document.querySelector("#demo");
const fullText = "A quote and one word has to be cursive";
// 拆分文本为普通部分和需要样式的单词
const [beforeText, afterText] = fullText.split(" cursive");

// 先添加普通文本部分
demoElement.appendChild(document.createTextNode(beforeText));

// 创建带样式的span并添加
const cursiveSpan = document.createElement("span");
cursiveSpan.style.fontFamily = "cursive";
cursiveSpan.textContent = " cursive";
demoElement.appendChild(cursiveSpan);

// 如果后面还有文本，继续添加
if (afterText) {
  demoElement.appendChild(document.createTextNode(afterText));
}

这样就不用手动写前面的文本，适合文本较长的场景。

内容的提问来源于stack exchange，提问作者Nicoletta