如何在JavaScript中高效使用appendChild添加元素并精简代码行数？

当然可以把这些代码合并成一行，这里提供两种实用的方式：

方式一：利用Element.append()的多参数特性 #

Element.append()支持同时传入多个节点或字符串（字符串会自动转为文本节点），直接一行搞定：

textblock.append("this is the first line.", document.createElement("br"), document.createElement("br"), "this is the second line.");

这种方式和你原代码的DOM结构完全一致，且不需要手动创建TextNode，代码更简洁。

方式二：使用innerHTML（适合静态内容） #

如果你的文本是可控的静态内容，直接通过innerHTML赋值会更短：

textblock.innerHTML = "this is the first line.<br><br>this is the second line.";

⚠️ 注意：如果内容包含用户输入的动态内容，这种方式存在XSS风险，优先用第一种方法。

扩展：处理上标元素 #

针对你提到的上标需求，同样可以用这两种方式实现：

• 用append()的写法：

textblock.append("H", (() => {const sup = document.createElement("sup"); sup.textContent = "2"; return sup;})(), "O", document.createElement("br"), document.createElement("br"), "this is the second line.");

• 用innerHTML的写法：

textblock.innerHTML = "H<sup>2</sup>O<br><br>this is the second line.";

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