如何使用原生 JavaScript 获取指定元素内部的完整 HTML 字符串

本文介绍如何通过原生 javascript（不依赖 jquery）准确提取任意 dom 元素内部的所有嵌套 html 标记为字符串，解决 innerhtml 无法保留父级标签、outerhtml 又包含自身标签的问题。

本文介绍如何通过原生 javascript（不依赖 jquery）准确提取任意 dom 元素内部的所有嵌套 html 标记为字符串，解决 innerhtml 无法保留父级标签、outerhtml 又包含自身标签的问题。

在实际开发中，常需将某个元素（如 <div id="foo">）内部的全部结构序列化为 HTML 字符串，用于动态渲染、日志记录或服务端传输。但初学者容易混淆几个关键属性：

• element.innerHTML：仅返回子节点的 HTML 内容，不包含该元素自身的开始/结束标签，且会自动修正非法嵌套（如移除孤立标签），但语义上符合“内部标记”需求；
• element.outerHTML：返回包含该元素自身标签的完整字符串（如 <div id="foo">...</div>），不符合“仅获取两标签之间内容”的要求；
• element.textContent：仅返回纯文本，无任何标签信息。

✅ 正确答案是：若目标是获取 <div id="foo"> 开始标签与结束标签之间的全部原始 HTML（即“所有 markup between two tags”），应使用 element.innerHTML。

例如：

<div id="foo">  <ul>    <li>item1</li>    <li>item2</li>  </ul></div>

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

⚠️ 注意事项：

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

• innerHTML 返回的是浏览器解析后生成的 DOM 对应的序列化 HTML，可能与原始 HTML 源码略有差异（如自动闭合 <img>、修正未闭合标签等）；
• 若需严格保留原始 HTML 字符串（如从 <script type="text/html"> 中读取模板），应避免依赖 innerHTML，改用 textContent + 手动解析，或通过服务器端预处理；
• innerHTML 不会执行脚本，但若后续将其插入到 DOM（如 el.innerHTML = markup），其中的 <script> 标签默认不会执行（除非显式调用 eval 或创建新 script 元素），这是安全机制，但也需注意 XSS 风险——务必对动态插入的内容做转义或使用 DOMPurify 等库净化。

总结：要精确获取某元素起始与结束标签之间的全部 HTML 字符串，请始终优先使用 element.innerHTML；outerHTML 适用于需要连同该元素自身一起导出的场景，而非题设需求。