JavaScript innerhtml 屬性獲取html內容不完整問題的解決方法
在JavaScript中，innerHTML 屬性常用于獲取或設置html元素的內容。然而，它有時無法完整獲取HTML內容，尤其當內容包含瀏覽器會解析的標簽時。本文將分析此問題并提供解決方案。
問題： 開發者嘗試使用 innerHTML 獲取
元素的完整HTML代碼，但結果不完整。例如：
標簽。這是因為<a href="http://www.babyishan.com/tag/%e6%b5%8f%e8%a7%88%e5%99%a8"><b>瀏覽器</b></a>在渲染頁面時會解析HTML，innerHTML 獲取的是解析后的<a href="http://www.babyishan.com/tag/dom"><b>dom</b></a>樹內容，而非原始HTML<a href="http://www.babyishan.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2"><b>字符串</b></a>。 </p>
<p><strong>解決方案：</strong> 為了獲取完整的HTML代碼，避免瀏覽器解析，我們可以將HTML代碼包含在一個瀏覽器不會直接解析的標簽內，例如 <textarea> 標簽：</textarea></p>
<div style="position:relative; padding:0px; margin:0px;">
<pre><textarea id="content" style="display:none;"> <meta charset="UTF-8"> <title>行號</title> <p>測試頁面</p> </textarea></pre>
<div></div>
</div>
<p>然后使用以下JavaScript代碼獲取完整HTML內容：</p>
<div style="position:relative; padding:0px; margin:0px;">
<pre>var ob = document.getElementById("content"); console.log(ob.value); // 使用 .value 屬性獲取 textarea 的內容</pre>
<div></div>
</div>
<p>通過將HTML代碼放在 <textarea> 標簽中，瀏覽器不會將其解析為文檔的一部分，innerHTML (此處使用 .value) 就能獲取完整的HTML代碼字符串。 注意我們使用了 .value 而不是 .innerHTML 來獲取 <textarea> 的內容。</textarea></textarea></p>
<p>這種方法有效地解決了 innerHTML 獲取HTML內容不完整的問題，確保獲取到原始的HTML代碼字符串。</p>
<p>
<div id="content"> <meta charset="UTF-8"> <title>行號</title> <p>測試頁面</p> </div>
使用以下JavaScript代碼：
立即學習“Java免費學習筆記（深入）”；
var ob = document.getElementById("content"); console.log(ob.innerHTML);
輸出結果會缺少 和
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
