neil neil - 6 months ago 23
Javascript Question

Missing closing tag from first item inserted into HTML page with jQuery

The first item in my list group has it's '< /a>' removed upon insertion into the page and my question is why and how do I fix this? If I console the html generated before and after the insertion the missing tag is there.

Here is the generator code:

function ObjMatched(item1, item2) {
this.item1 = item1;
this.item2 = item2;
}

var obj_list = '<div class="list-group>';

for (var i = 0; i < Obj.length;i++) {
if (Obj[i].item1 == selection) {

ObjMatched.item1 = Obj[i].item1;
ObjMatched.item2 = Obj[i].item2;

obj_list += '<a href="#" class="list-group-item" data-item1="' + ObjMatched.item1 + '" data-item2="' + ObjMatched.item2 + '" >' + ObjMatched.item1 + ', ' + ObjMatched.item2 + '</a>';

}
}
obj_list += '</div>';

$("#obj_block").append(obj_list);


Here is the HTML output:

<div id="obj_block">
<div class="list_group">
<a href="#" class="list-group-item" data-item1="mary" data-item2="smith">mary, smith
<a href="#" class="list-group-item" data-item1="tom" data-item2="jones">tom, jones</a>
<a href="#" class="list-group-item" data-item1="dirty" data-item2="harry">dirty, harry</a>
</div>
</div>


As a consequence the first item does not appear as part of the list within the web browser and is not clickable. I have tried replacing append() with html() to no avail.
I have tested this in Chrome, Safari and Firefox all with the same result.
What am I doing wrong?

Answer

You're not closing the quotes on your first div:

var obj_list = '<div class="list-group>';

Change it to:

var obj_list = '<div class="list-group">';

And it will work. It's happening because the first apostrophe is closing this div and making the anchor tag invalid.