I have the following code which inserts a div at the top of a page:

function setUpAnnouncementsContainer() { var announcements = 'Letterpress scenester franzen, shabby chic meh hella knausgaard 3 wolf moon craft beer ethical chillwave hot chicken beard. Tbh vexillologist tousled .'; var divAnnouncements = '<div id="divAnnouncements">' + announcements + '</div>'; var divAnnouncementsContainer = '<div id="divAnnouncementsContainer" class="col-xs-12 col-md-12 col-xl-12">' + divAnnouncements + '</div>'; var rowAnnouncements = '<div class="row">' + divAnnouncementsContainer + '</div>'; var isHomePage = $('#hdnIsHomePage').length > 0; if (isHomePage) { //set up divAnnouncementsContainer for homepage $('.container')[1].after(rowAnnouncements); } //else set up divAnnouncementsContainer for other pages else $('div.row.breadcrumb-div').after(rowAnnouncements); }

Notice that my jQuery appends the html differently if the page is the home page vs a page that isn't the home page. The code for non-homepage inserts a div as expected but the code for homepage inserts a string representation of the html as opposed to the html itself.

I tried wrapping the dynamic homepage code with a jQuery selector but this displays "[Object][Object]" on the homepage instead of the expected html elements. I also tried wrapping the dynamic homepage code with a jQuery selector and .html() at the end but this just renders the html as a string instead of an element. Any idea what I might be doing wrong here or how to fix?