javascript innerhtml 属性获取html内容不完整的问题及解决方法
在使用JavaScript的innerHTML属性获取HTML元素内容时，有时会遇到获取到的内容不完整的情况。这通常与浏览器如何解析和渲染HTML内容有关。本文将分析一个具体案例，并提供解决方案。
问题描述：
开发者试图使用innerHTML获取<div>元素内部完整的HTML代码，但结果却丢失了部分内容。代码如下：
<pre class="brush:php;toolbar:false;"><div id="content">
<meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
</div></pre>
<p>JavaScript代码：</p>
<pre class="brush:php;toolbar:false;">var ob = document.getElementById("content");
console.log(ob.innerHTML);</pre>
<p>控制台输出并非完整的HTML代码，而是只包含部分内容。</p>
<p><strong>问题原因及解决方案：</strong></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1405" title="Listnr"><img
src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d0fed2711453.png" alt="Listnr" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1405" title="Listnr">Listnr</a>
<p>AI文本到语音生成器</p>
</div>
<a href="/ai/1405" title="Listnr" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p>浏览器会解析和渲染<code><div>内的HTML代码。浏览器将<code><div>内容识别为一个完整的HTML文档，并进行渲染。<code>innerHTML获取的是渲染后的内容，而非原始HTML代码。由于<div>内嵌套了完整的HTML文档结构，浏览器会忽略<code><div>标签外的<code><!DOCTYPE>声明，只渲染标签内的内容。
为了获取完整的HTML代码，建议将HTML代码包含在一个不会被浏览器直接渲染的元素中，例如<textarea></textarea>标签：
修改后的HTML代码：
<textarea id="content" style="display:none;">
<meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
</textarea>
修改后的JavaScript代码仍然可以使用innerHTML或innerText方法获取完整的HTML内容。 通过这种方法，浏览器不会将<textarea></textarea>的内容作为HTML文档渲染，而是将其视为纯文本，从而innerHTML可以完整获取原始HTML代码。 注意style="display:none;"确保<textarea></textarea>不会显示在页面上。
