jQuery插入动态HTML作为字符串，而不是HTML？

Question

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?

Answer 1

Well $('.container')[1] does not return a jQuery object but a DOM node.

So you are using the native after command which works differently ( and is experimental ).

Use $('.container').eq(1) instead