动态添加HTML文本未呈现为h3标签的原因排查

嘿，这问题我一眼就看出来啦！你的代码里链式调用appendChild的方式搞错了，这才导致文本没被正确包裹在<h3>标签里。

问题根源 #

appendChild()方法的特性是：它会返回被添加的那个子节点，而不是你调用它的父节点。你的链式写法会让节点嵌套完全乱掉：

1. 最内层h3Element.appendChild(newPick)返回的是newPick（文本节点）
2. 接着brElement.appendChild(...)试图把文本节点塞进<br>里，但<br>是空元素，根本不能包含子节点，浏览器会自动把文本节点移到<br>外面
3. 最后pickCategory.appendChild(...)把这个文本节点直接加到了div里，<h3>标签反而被丢在了错误的位置

这样一来，文本根本不在<h3>内部，当然不会有h3的样式啦！

正确写法 #

你需要分步完成节点嵌套，或者调整调用顺序（分步更清晰，不容易出错）：

// 1. 创建所有需要的节点
let brElement = document.createElement("br");
let pickCategory = document.createElement("div");
let h3Element = document.createElement("h3");
let newPick = document.createTextNode("Изберете категория МПС: ");

// 2. 正确嵌套节点：先把文本放进h3
h3Element.appendChild(newPick);
// 3. 把br和h3都加到div里
pickCategory.appendChild(brElement);
pickCategory.appendChild(h3Element);
// 4. 最后把整个div加到body中
document.body.appendChild(pickCategory);

这样写出来的DOM结构就是正确的：

<body>
  <div>
    <br>
    <h3>Изберете категория МПС: </h3>
  </div>
</body>

文本会被正确包裹在<h3>里，自然就能呈现h3的样式了。

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