JavaScript innerHTML 获取 HTML 代码不完整问题的解决方法
在 javascript 中使用 innerhtml 属性获取 html 元素内容时，有时会遇到获取到的代码不完整的情况。本文分析一个具体案例，并提供解决方案。
问题描述： 开发者尝试使用 innerHTML 获取包含完整 HTML 结构的
元素内容，但结果不完整，缺少部分 HTML 标签。
原始代码：
<div id="content">
<meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p>
</div>var ob = document.getElementById("content");
console.log(ob.innerHTML);console.log 输出结果缺少
标签及标签外的部分内容。
原因分析： 浏览器渲染页面时会解析 HTML 代码并构建 DOM 树。innerHTML 获取的是渲染后 DOM 树对应的 HTML 片段，而非原始 HTML 源代码。由于
元素包含完整的 HTML 文档结构（包含 、 等标签），浏览器会将其解释为文档的一部分并进行渲染。因此，innerHTML 获取到的只是浏览器渲染后标签内部的内容。
<p><strong>解决方案：</strong> 为了避免浏览器解析和渲染内部 HTML 代码，可以将完整 HTML 结构代码放入浏览器不会直接渲染的标签内，例如 <textarea> 标签：</textarea></p>
<p><strong>修改后的 HTML 代码：</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><textarea id="content" style="display:none;">
<meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p>
</textarea></pre><div class="contentsignin">登录后复制</div></div>
<p>或者使用<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">标签：</p>
<pre class="brush:php;toolbar:false"><pre id="content" style="display:none;">
<meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p>
</pre><div class="contentsignin">登录后复制</div></div>
</p>
<p>通过这种方法，浏览器不会渲染 <textarea> 或 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 标签内的 HTML 代码，可以使用 innerHTML 或 textContent 完整获取原始 HTML 内容。JavaScript 代码只需修改 getElementById 的 id 即可。 使用<pre class="brush:php;toolbar:false">标签的好处是，它会保留代码的格式，而<textarea>则会将换行符转换为
。</textarea></pre><div class="contentsignin">登录后复制</div></div></pre></textarea></p>
<p><img src="https://img.php.cn/upload/article/001/246/273/174148717330397.jpg" alt="JavaScript中innerHTML获取HTML代码不完整，该如何解决？
"></p>
<p>选择哪种方法取决于你的具体需求，如果需要保留代码格式，建议使用</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">标签，并设置style="white-space: pre;"来保证换行和空格的显示。 如果不需要保留格式，则使用<textarea>标签更简洁。 记住将style="display:none;"添加到标签中，这样就不会影响页面布局。</textarea></pre><div class="contentsignin">登录后复制</div></div>