如何为换行标签添加闭合标签？受HTML标准限制无法保存修改

问题背景 #

需要将DOM结构保存为SVG图片，SVG作为XML格式要求<br>与<img>必须带有闭合标签，但通过innerHTML替换这些标签时，会被自动转回HTML标准的无闭合形式；即便手动添加<br></br>，最终也会得到两个独立的<br>标签。

解决方案 #

不要通过innerHTML修改标签，直接使用XMLSerializer将整个SVG元素序列化为符合XML规范的字符串，浏览器会自动处理HTML元素的闭合格式，适配SVG要求。

示例代码 #

// 获取目标SVG元素
const svgElement = document.querySelector('svg');
// 初始化XML序列化器
const xmlSerializer = new XMLSerializer();
// 将SVG序列化为XML字符串
const svgXmlString = xmlSerializer.serializeToString(svgElement);
// 输出符合SVG标准的内容
console.log(svgXmlString);

原理说明 #

XMLSerializer是浏览器原生API，专门用于将DOM节点序列化为XML格式字符串。它会自动按照XML规则处理所有元素：

• 将HTML中无闭合的自闭合标签（如<br>、<img>）转换为XML要求的<br/>、<img/>格式
• 保留所有元素的属性与结构，确保生成的内容完全符合SVG标准

如果需要修改特定元素（比如调整<img>的属性），建议直接操作DOM节点（创建、修改、替换元素），再进行序列化，避免innerHTML的HTML解析规则干扰。

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