JavaScript中innerHTML获取HTML代码不完整，该如何解决？

JavaScript innerHTML 获取 HTML 代码不完整问题的解决方法

在 javascript 中使用 innerhtml 属性获取 html 元素内容时，有时会遇到获取到的代码不完整的情况。本文分析一个具体案例，并提供解决方案。

问题描述： 开发者尝试使用 innerHTML 获取包含完整 HTML 结构的 <div> 元素内容，但结果不完整，缺少部分 HTML 标签。 <p><strong>原始代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;div id=&quot;content&quot;&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;&lt;/meta&gt;&lt;title&gt;行号&lt;/title&gt;&lt;p&gt;测试页面&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/735&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/001/246/273/68b6cdbf48df2598.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/735&quot;&gt;代码小浣熊&lt;/a&gt; &lt;p&gt;代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节&lt;/p&gt; &lt;div class=&quot;&quot;&gt; &lt;img src=&quot;/static/images/card_xiazai.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;span&gt;51&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/735&quot; class=&quot;aritcle_card_btn&quot;&gt; &lt;span&gt;查看详情&lt;/span&gt; &lt;img src=&quot;/static/images/cardxiayige-3.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</pre>

解决方案： 为了避免浏览器解析和渲染内部 HTML 代码，可以将完整 HTML 结构代码放入浏览器不会直接渲染的标签内，例如 <textarea></textarea> 标签：

修改后的 HTML 代码：

<textarea id="content" style="display:none;">
    <meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p>
</textarea>

或者使用

</code>标签：</p>
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;" id="content" style="display:none;">
    <meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p>