本文详解如何在javascript中动态创建`
`换行元素并将其插入dom，重点解决“仅创建未挂载”导致无效的问题，并提供字符串批量换行处理的健壮方案。

在JavaScript中，调用 document.createElement('br') 仅会生成一个独立的 DOM 节点对象，它尚未存在于页面中——就像写好了一行代码却没执行 return，它不会自动显示。因此，你遇到的问题核心在于：创建了
元素，但未将其添加到文档树中。

你原来的代码：

if (character === '\n') {
  element = document.createElement('br');
  // ❌ 缺少挂载步骤：此时 element 是游离节点，对页面无任何影响
}

即使加上 var 声明或改用双引号，语法问题并非主因；真正缺失的是插入操作。必须显式调用 appendChild()（或 insertBefore()、append() 等）将新元素挂载到某个父容器下，例如：

if (character === '\n') {
  const br = document.createElement('br');
  targetElement.appendChild(br); // ✅ 正确：挂载到目标容器（如 div、p 或 body）
}

⚠️ 注意事项：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“Java免费学习笔记（深入）”；

• 不要直接对 document（即 HTMLDocument 对象）调用 appendChild() —— 它没有 body 以外的默认可挂载位置；推荐明确指定父节点，如 document.body 或一个已存在的
  。
• 若在循环中逐字符处理（如遍历字符串），频繁调用 appendChild() 性能较低；更优做法是预处理字符串，一次性注入 HTML：

const text = `Hello\nWorld\nJavaScript`;
const htmlContent = text.split('\n').map(line => line.replace(/&/g, '&').replace(/</g, '<')).join('<br>');
// 安全转义后再拼接，防止 XSS

const container = document.getElementById('output') || document.body;
container.innerHTML = htmlContent; // ✅ 高效、简洁、安全（经转义后）

✅ 推荐完整实践示例：

<div id="output"></div>
<script>
  const source = "第一行\n第二行\n第三行";
  const outputEl = document.getElementById('output');

  // 方案1：逐个创建并追加（适合复杂逻辑控制）
  source.split('').forEach(char => {
    if (char === '\n') {
      outputEl.appendChild(document.createElement('br'));
    } else {
      outputEl.appendChild(document.createTextNode(char));
    }
  });

  // 方案2：批量处理（推荐用于纯文本换行）
  // outputEl.innerHTML = source.split('\n').join('<br>');
</script>

总结：createElement('br') 只是“造砖”，appendChild() 才是“砌墙”。务必确保每个新元素都有明确归属；对于多换行场景，优先采用字符串预处理 + innerHTML（注意转义）方式，兼顾可读性、性能与安全性。