JavaScript innerHTML 获取 HTML 代码不完整问题的解决方法
在 javascript 中使用 innerhtml 属性获取 html 元素内容时，有时会遇到获取到的代码不完整的情况。本文分析一个具体案例，并提供解决方案。
问题描述： 开发者尝试使用 innerHTML 获取包含完整 HTML 结构的
原始代码：
<div id="content"> <meta charset="UTF-8"></meta><title>行号</title><p>测试页面</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1636"> <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d8421727c371.png" alt="letterdrop"> </a> <div class="aritcle_card_info"> <a href="/ai/1636">letterdrop</a> <p>B2B内容营销自动化平台，从创意到产生潜在客户的内容的最佳实践和工具。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="letterdrop"> <span>49</span> </div> </div> <a href="/ai/1636" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="letterdrop"> </a> </div> </div>
var ob = document.getElementById("content");console.log(ob.innerHTML);
console.log 输出结果缺少
立即学习“Java免费学习笔记（深入）”；
原因分析： 浏览器渲染页面时会解析 HTML 代码并构建 DOM 树。innerHTML 获取的是渲染后 DOM 树对应的 HTML 片段，而非原始 HTML 源代码。由于
innerHTML 获取到的只是浏览器渲染后标签内部的内容。
解决方案： 为了避免浏览器解析和渲染内部 HTML 代码，可以将完整 HTML 结构代码放入浏览器不会直接渲染的标签内，例如 标签：
修改后的 HTML 代码：
或者使用
标签：行号 测试页面
通过这种方法，浏览器不会渲染 或
标签内的 HTML 代码，可以使用 innerHTML 或 textContent 完整获取原始 HTML 内容。JavaScript 代码只需修改 getElementById 的 id 即可。 使用
标签的好处是，它会保留代码的格式，而则会将换行符转换为n。
选择哪种方法取决于你的具体需求，如果需要保留代码格式，建议使用
标签，并设置style="white-space: pre;"来保证换行和空格的显示。 如果不需要保留格式，则使用标签更简洁。 记住将style="display:none;"添加到标签中，这样就不会影响页面布局。
以上就是JavaScript中innerHTML获取HTML代码不完整，该如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563273.html
微信扫一扫 
支付宝扫一扫 
