Question

我将以下HTML代码存储在javascript字符串中：我使用的是谷歌CDN的Jquery 1.6.1

的console.log（字符串）：

<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包装它并输出它时，Jquery最终关闭我的第一个<a>标记，并在看似随机的地方的代码中抛出其他<a>标记，产生了这里的截图:(截图因为输出格式非常糟糕）

enter image description here

不同之处在于它 *立即关闭第一个<a>， *在我的第一个<a>周围插入第二个<div> *在<a>之后的第二个<div>之后插入第三个<h2> *在<a>之后和预期<h2>

之前插入第4 <a>

因此，这实际上搞乱了我之后使用的自动完成代码。这两个片段实际上是一个接一个地生成的：

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

有人可以告诉我最新情况如何解决？

谢谢！

Answer 1

Block elements are not allowed inside <a> elements.浏览器会尝试更正此问题，但似乎会生成无效的HTML代码。

确保内部只有内嵌元素。

为什么你还有外部<a>元素？它似乎没有任何意义。它甚至没有href属性，也是无效的。

删除它。

Answer 2

div在a标记内无效，请改为使用display:block;替换，或将a更改为div并附加点击事件处理程序以模仿标记。

Answer 3

div是一个块元素。 a是内联元素。块元素在内联元素内部是非法的。当jQuery设置一个元素innerHTML时，我认为你的浏览器修复它并不是真正的jQuery。

Answer 4

您不能将块元素<div>放在内联元素<a>中。此外，您不能在锚标记中放置另一个锚标记。这里有各种各样的无效代码，所以jQuery正在扼杀它。

我强烈推荐你validate your code，修正错误，然后从那里开始。

侧注： HTML5实际上确实允许内联元素中的块元素，但前提是您应用适当的CSS将块元素转换为内联元素本身。你最好的选择是为了简单起见，仍然要远离内联中的块元素。

为什么JQuery会破坏我的HTML，添加额外的<a> tags?</a>

4 个答案: