JavaScript创建HTML元素无缩进问题及格式化方法咨询

原因 #

用document.createElement创建元素、append挂载节点时，浏览器只会构建DOM节点树，不会自动添加缩进、换行这类空白字符——这些空白属于额外的文本节点，对页面渲染功能没有影响，所以浏览器不会默认生成。你从开发者工具复制的是DOM序列化后的原始字符串，自然就是无缩进的单行形式。

实现缩进格式化的简便方法 #

方法1：编辑器一键格式化（最省事） #

从开发者工具复制HTML后，粘贴到VS Code、Sublime等代码编辑器里，用编辑器自带的HTML格式化功能：

• VS Code：按Ctrl+Shift+F（Windows）/Cmd+Shift+F（Mac）
• 其他编辑器一般也有类似快捷键或菜单选项，直接就能把单行HTML转成带缩进的结构化格式。

方法2：JS代码里手动生成格式化HTML #

如果需要在代码里直接生成带缩进的HTML字符串，可以选下面两种方式：

手动添加空白节点（精准控制）

在挂载子元素时，插入换行和缩进的文本节点：

// 给accordionItem添加子元素时插入空白
accordItem.append(
  document.createTextNode('\n    '),
  accordTitle,
  document.createTextNode('\n    '),
  accordContent,
  document.createTextNode('\n')
);
// 给accordionContent添加子元素时同理
accordContent.append(
  document.createTextNode('\n        '),
  accordContentParagraph,
  document.createTextNode('\n    ')
);

这样生成的DOM里就包含了空白节点，复制或序列化时会带缩进。

用序列化工具格式化

通过XMLSerializer把DOM转成字符串后，用正则简单处理格式化：

function formatDOM(element) {
  const serializer = new XMLSerializer();
  let html = serializer.serializeToString(element);
  // 针对手风琴结构做格式化匹配
  html = html
    .replace(/><([a-z])/g, '>\n    <$1')
    .replace(/<\/div>/g, '\n</div>')
    .replace(/^\s+/, '')
    .replace(/\n    <\/div>/g, '\n</div>');
  return html;
}

// 用法示例：获取容器的格式化HTML
const formattedHTML = formatDOM(container);
console.log(formattedHTML);

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