neil neil - 5 months ago 15x
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>';


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>

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?


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.