先聊聊内嵌 HTML 获取这个常见需求。本文目标是用原生 JavaScript（不依赖 jQuery）准确提取任意 DOM 元素内部所有嵌套的 HTML 标记并转为字符串，关键要解决 innerHTML 无法保留父级标签、而 outerHTML 又包含自身标签的尴尬问题。

在实际前端开发中，经常需要将某个元素（比如

）内部的所有结构序列化为 HTML 字符串，用于动态渲染、日志记录或服务端传输。不过，很多初学者容易在几个关键属性上绕晕，导致选错方法。

• element.innerHTML：只返回子节点的 HTML 内容，不包含该元素自身的开始与结束标签。此外，它会自动修正非法嵌套（比如移除孤立标签），语义上确实符合“内部标记”的需求，是获取子元素 HTML 的首选。
• element.outerHTML：返回包含该元素自身标签的完整字符串（例如

  ...

  ），这明显不符合“仅获取两标签之间内容”的要求。
• element.textContent：只返回纯文本内容，不包含任何 HTML 标签信息，无法满足获取结构化标记的需求。

那么，正确答案是什么？如果目标是获取

开始标签与结束标签之间的全部原始 HTML（也就是“两个标签之间的所有标记”），就应该使用 element.innerHTML。

来看一个具体例子：

  
    
item1
    
item2
  

const foo = document.getElementById("foo");const markup = foo.innerHTML; // ✅ 正确结果：// "
n    
item1
n    
item2
n  
"

⚠️ 不过，使用过程中有几个需要注意的细节：

• innerHTML 返回的是浏览器解析后生成的 DOM 所对应的序列化 HTML，可能与原始 HTML 源码存在细微差异（比如自动闭合 、修正未闭合标签等）。
• 如果需要严格保留原始 HTML 字符串（例如从