Question

谁能解释我发生了什么？

看看这个简单的脚本：jsfiddle

var html;
html = '<a href="" class="_list-group-item">';
html += '<div class="media">';
html += '<div class="media-left padding-right-10">';
html += '<i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>';
html += '</div>';
html += '<div class="media-body">';
html += '<p>hi, my name is Jo</p>';
html += '</div>';
html += '<div class="media-right">';
html += '<small><a class="" data-notificationId="{{id}}" href="#">mark as read</a></small>';
html += '</div>';
html += '</div></a>';

        console.log(html);
        $(".listContainer").html(html);

console.log显示正确的html代码，序列（parent，child）非常简单：

一

div.media

div.left并关闭

div.body并关闭

div.right并关闭

关闭媒体

关闭

但是如果你用开发者工具查看结果页面，那么代码就是一团糟。它写A标签并立即关闭它。（??）然后是div.media，接着是left和body里面的另一个A标签（??），最后是div右边。

请告诉我你也看到了这一点，它不是我浏览器的笑话。

为什么会这样？

PS：当我使用把手时，我发现这种奇怪的行为，试图在我的列表容器中注入html代码。

PPS：想知道另一个奇怪的事情吗？如果你从那个字符串中删除A标签，一切都很完美！ ......再说一次，为什么？

jQuery.html发生了什么。为什么这段代码结果一团糟？

0 个答案: