What is happening to jQuery.html. Why this code result is a mess?

256
November 22, 2016, at 09:21 AM

who can explain me what's going on?

Take a look at this simple script: 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 shows the correct html code, the sequence (parent, child) is super simple:

a

div.media

div.left and close

div.body and close

div.right and close

close media

close a

But if you look at the result page with developers tools, the code is a mess. It writes the A tag and immediately close it.(??) Then div.media, followed by left and body inside another A tag (??) and finally, the div right.

Please tell me that you see this too, that it's not a joke of my browser.

Why this?

PS: I found this strange behavior while I was working with handlebars, trying to inject html code inside my list container.

PPS: Want to know another STRANGE thing? Everything is perfect if you delete the A tag from that string! ... Again, why?

READ ALSO
Iterating Through Each Checked Input Affecting Unchecked Inputs

Iterating Through Each Checked Input Affecting Unchecked Inputs

I have a list of check boxes inside p elements.

313
JQuery datepicker only works if I put an alert() in the script

JQuery datepicker only works if I put an alert() in the script

I'm coding a jQuery datatable with some input fields (on each row). One of the fields needs to be a date and so I'm trying to use jQuery datepicker to accomplish the input for that field.

250
AJAX method Jquery can&#39;t return data

AJAX method Jquery can't return data

I can't return the value of an ajax request in Jquery. Here's my code:.

298
jQuery selector on custom attribute value

jQuery selector on custom attribute value

I am trying to understand some jQuery syntax that I did not originally write. .

336