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

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

在实际开发中，常需将某个元素（如

）内部的全部结构序列化为 HTML 字符串，用于动态渲染、日志记录或服务端传输。但初学者容易混淆几个关键属性：

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

✅ 正确答案是：若目标是获取

开始标签与结束标签之间的全部原始 HTML（即“所有 markup between two tags”），应使用 element.innerHTML。

例如：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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

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

\n
• item1
\n
• item2
\n

"

⚠️ 注意事项：

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

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

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南