為什么 JQuery 會破壞我的 HTML，添加額外的<a>標簽？</a>

Question

我在 javascript 字符串中存儲了以下 HTML 代碼：並且我正在使用來自谷歌 CDN 的 Jquery 1.6.1

控制台日志（字符串）：

<a><div class='product-autocomplete-result'>
            <div class='cell img'>
              <img src='http://beta.prizzm.com.s3.amazonaws.com/uploads/product_image/image/1/thumb_serrano_navy_1.jpg'>
            </div>
            <div class='cell'>
              <h2><a href="/products/1">Serrano Hobo</a></h2>
              <div class='clear'></div>
              <a href="#">0 people have this</a>
              <span>Rating 3</span>
              <div id='stars-wrapper-1'>
                <select>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3" selected="selected">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                </select>
              </div>
            </div>
            <div class='cell'>
              <a href="#" class="button">I have this</a>
              <a href="#" class="button">I want this</a>
            </div>
          </div></a>

當我嘗試用 JQuery 和 output 包裝它時，Jquery 最終關閉了我的第一個<a>標簽，並在屏幕截圖中隨機拋出了其他<a>標簽： output 格式太差了）

不同之處在於它 * 立即關閉第一個<a> ， * 在我的第一個<div>周圍插入第二個<a> * 在我的第二個<div>之后插入第三個<a>在<h2>之前 * 插入第四個<a>在<h2>之后和預期的<a>之前

結果，這真的弄亂了我之后使用的自動完成代碼。 這兩個片段實際上是一個接一個地生成的：

console.log(code);
console.log($(code));

有人可以告訴我發生了什么以及如何解決它嗎？

謝謝！

Answer 1

<a>元素內不允許使用塊元素。 瀏覽器試圖糾正這個問題，但似乎產生了無效的 HTML 代碼。

確保里面只有內聯元素。

為什么你還有外部<a>元素？ 它似乎沒有任何目的。 它甚至沒有href屬性，這也是無效的。

只需將其刪除。

Answer 2

div在a標簽內無效，使用 span 和display:block; 相反，或者將 a 更改為 div 並附加單擊事件處理程序以模仿 a 標簽。

Answer 3

div是塊元素。 a是一個內聯元素。 塊元素在內聯元素中是非法的。 當 jQuery 設置一個元素的innerHTML時，我不認為 jQuery 應該歸咎於瀏覽器修復問題。

Answer 4

您不能將塊元素<div>放在內聯元素<a>內。 此外，您不能在一個錨標簽內放置另一個錨標簽。 這里有各種各樣的無效代碼，所以 jQuery 對此感到窒息。

我強烈建議您從那里驗證您的代碼、修復錯誤和 go。

旁注： HTML5 實際上確實允許內聯元素中的塊元素，但前提是您應用正確的 CSS 將塊元素本身變成內聯元素。 為了簡單起見，最好的選擇是仍然遠離 inline 中的塊元素。