为什么 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 中的块元素。