通过 ajax 附加 HTML 的意外结果

Question

我必须像这样动态地创建一系列 HTML 块：

<div class="col-md-4 gal-gd text-center wow fadeInUpBig animated animated" data-wow-delay="0.4s">
    <a href="images/r2.jpg" class="b-link-stripe b-animate-go  swipebox">
        <div class="gallery-gal-effect slow-zoom horizontal">
            <div class="img-box"><img src="images/r2.jpg" alt=" " /></div>
            <div class="gallery-text-box">
                <div class="gallery-gal-text">
                    <h4>Title</h4>
                    <span class="separator"></span>
                    <p>Description.</p>
                    <span class="separator"></span>
                    <p><a href="#">Cancella</a></p>
                    <span class="separator"></span>
                </div>
            </div>
        </div>
    </a>
</div>

这就是我试图在 ajax 请求中实现它的方式：

    success: function (response, status) {
        $.each(response, function (i, item) {
            $('#output') 
                .append('<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s"><a href="' + item.path + '" class="b-link-stripe b-animate-go  swipebox"><div class="gallery-gal-effect slow-zoom horizontal"><div class="img-box"><img src="' + item.path + '" alt=""></img></div><div class="gallery-text-box"><div class="gallery-gal-text"><h4>' + item.title + '</h4><span class="separator"></span><p>' + item.descrizione + '</p><span class="separator"></span><p><a href="#" onclick="cancella('+item.id+');">Elimina</a></p><span class="separator"></span></div></div></div></a></div>');

这是我的 HTML：

<div id="output">
    <!-- ajax request -->
</div>

问题是，不知道是什么原因，附加代码如下：

<div class="col-md-4 gal-gd text-center wow fadeInDownBig animated animated" data-wow-delay="0.4s">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-effect slow-zoom horizontal">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<div class="img-box">
<img src="images/r2.jpg" alt="">
</div>
</a>
<div class="gallery-text-box">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<div class="gallery-gal-text">
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg">
<h4>Title</h4>
<span class="separator"></span>
<p>Description</p>
<span class="separator"></span>
</a>
<p>
<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>
<a href="#" >Other things</a>
</p>
<span class="separator"></span>
</div>
</div>
</div>
</div>

如你所见

<a class="b-link-stripe b-animate-go swipebox" href="images/r2.jpg"></a>

重复 5 次而不是两次，这会在我的图库中生成 5 次相同的图像。

为什么？这里有什么问题？

Answer 1

您有一个 <a> 元素嵌套在另一个 <a> 元素中。这是不允许的。我什至无法猜测这应该是什么意思。

HTML5 规范。说：

4.3.6.1 The a element

...

内容模型：
Transparent，但不能有interactive content的后代。

其中交互式内容包括a元素。

我猜想 jQuery（或浏览器）的 HTML 解析器会尝试插入额外的开始和结束标签以理解 HTML，但最终会得到您所显示的奇怪结果。

还有另一个错误：</img> 标签在 HTML 中是不允许的。

3.2.2.2 Void Elements

...

在 HTML 中，[...] end tag 必须省略，因为该元素会被解析器自动关闭。

---

如果您想要可预测的结果，您需要找到一种方法将您的 HTML 重新加工成结构合理的东西。