向HTML段落追加带格式元素时格式丢失，寻求技术解决方案

我尝试向HTML段落元素追加混合了加粗与非加粗样式的span元素，但追加后的span无法保留已设置的格式。执行以下代码后，生成的text段落并未显示追加span的加粗格式，仅显示纯文本：

var text = document.createElement("paragraph")
var boldPiece = document.createElement("span")
boldPiece.style = 'font-weight: bold'
boldPiece.innerHTML = variableText
text.appendChild(boldPiece)

完整代码示例：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script type="module">
    var text = document.createElement("paragraph")
    text.innerText += "not bolded"
    var boldPiece = document.createElement("span")
    boldPiece.style = "font-weight: bold"
    boldPiece.innerText = " bolded "
    text.appendChild(boldPiece)
    text.innerText += "not bolded"
    container.appendChild(text)
  </script>
</html>

问题原因 #

• 错误的元素类型：document.createElement("paragraph")创建的是自定义元素，而非HTML标准的<p>段落元素，可能导致浏览器对其内部样式的解析异常。
• innerText的破坏性：text.innerText += "not bolded"会清除text元素内所有已存在的子节点（包括带样式的span），将所有内容转为纯文本输出，直接丢失了span的样式结构。

修复代码 #

// 创建标准段落元素
var text = document.createElement("p")
// 用append添加初始文本，保留后续添加子元素的能力
text.append("not bolded")
var boldPiece = document.createElement("span")
// 规范设置样式，避免覆盖其他样式属性
boldPiece.style.fontWeight = "bold"
boldPiece.innerText = " bolded "
text.appendChild(boldPiece)
// 继续用append添加末尾文本，不破坏已有子元素
text.append("not bolded")
container.appendChild(text)

关键说明 #

1. 使用document.createElement("p")创建符合HTML标准的段落元素；
2. 替换innerText +=为append()方法：append()支持同时添加文本节点和元素节点，不会清除已有内容的结构和样式；
3. 设置样式时，优先使用style.属性名的方式（如fontWeight），比直接赋值style字符串更安全，避免意外覆盖其他样式。

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