如何获取JS动态创建的DOM元素的原始HTML代码

• 单元素场景直接使用outerHTML属性
  无需创建挂载到页面的隐藏div容器，只要持有document.createElement生成的DOM对象引用，直接读取element.outerHTML即可拿到包含元素自身、所有已配置HTML属性（类名、内联样式、通过setAttribute设置的行内属性等）的完整HTML字符串。这个方案不需要操作页面已渲染的DOM树，不会触发重绘重排，也不需要事后清理临时节点，代码最简洁。
  示例：

  // 已创建并配置完成的DOM元素
  const actionBtn = document.createElement('button');
  actionBtn.className = 'btn primary-btn';
  actionBtn.style.borderRadius = '4px';
  actionBtn.setAttribute('onclick', 'handleAction()');
  // 直接获取标准HTML字符串
  const btnHtml = actionBtn.outerHTML;
  

  注意：通过element.onclick = 函数、addEventListener('click', 函数)方式绑定的事件监听器存储在JS运行时内存中，不属于DOM的HTML属性范畴，任何HTML序列化方案都无法导出这部分内容。如果需要保留点击交互，请通过setAttribute设置行内事件属性。

• 多元素批量场景使用离屏临时容器
  如果需要一次性获取多个生成元素拼接后的HTML，不用在页面里插入带id的隐藏div，只需要在内存中创建一个从未挂载到页面DOM树的div作为临时容器即可。离屏容器不会触发页面渲染，不需要添加隐藏样式，也不需要调用DOM查询方法获取容器引用，性能比挂载隐藏节点的方案更好。
  示例：

  // 内存中创建临时容器，全程不插入页面
  const offscreenBox = document.createElement('div');
  // 将所有生成好的目标元素塞入容器
  createdDomList.forEach(item => offscreenBox.append(item));
  // 获取所有子元素拼接完成的HTML字符串
  const batchExportHtml = offscreenBox.innerHTML;
  

  注：原代码中使用的document.getElementBy方法名有误，标准DOM API中对应方法为getElementById，使用离屏容器的方案可以完全规避这类DOM查询操作。

• 数据库导出的注意事项

  • 如果你给元素配置的是类名样式而非内联样式，导出的HTML字符串不包含对应的CSS规则，后续从数据库取出渲染时会丢失样式，需要同步导出关联的CSS内容，或者将关键样式转为内联样式后再做序列化。
  • 不要使用XMLSerializer序列化普通HTML内容，它会按照XML语法规则处理标签，可能生成不符合HTML规范的格式，outerHTML和离屏容器innerHTML返回的内容完全符合W3C HTML标准，可直接存储使用。

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