Create Multiple HTML Elements With JQuery OnClick

Question

I have 3 tabs for a reddit page I am making. When I click any of the tabs I want the following things to happen ONLY in their respective tabs:

1. <div>'s with specific classes will be created in a loop until xTcount
2. Reddit function I have written will populate those <div>'s with content

I'm having trouble getting the <div> structure to create OnClick though. Here is what I want my HTML structure to look like (I want x number of identical ones).

            <div class="newsContainer">
                <div class="redditThumbnail clearfix floatleft"></div>
                <div class="articleHeader read clearfix">
                    <div class="actionmenuHeader">
                        <div class="userNameContainer"></div>
                        <div class="redditFlair"></div>
                        <div class="subRedditName"></div>
                        <div class="redditDate"></div>
                        <div class="redditScore">
                            <i class="redditUpvote material-icons">
                                keyboard_arrow_up
                            </i>
                        </div>
                    </div>
                    <p class="redditTitle clearfix mediaTitle news"></p>
                    <div class="redditPost mediumtext"></div>
                </div>
            </div>

And here is my JQuery script that runs OnClick of another element.

var divPerPage = 10;
    for(var i = 0; i < divPerPage; i++) {

        $( "<div class='listrow news nomargin'></div>" ).appendTo( "#redditCardBox1" );
        $( "<div class='newsContainer'></div>" ).appendTo( ".listrow" );
        $( "<div class='redditThumbnail clearfix'></div>" ).appendTo( ".newsContainer" );
        $( "<div class='articleHeader read clearfix'></div>" ).appendTo( ".newsContainer" );
        $( "<div class='actionmenuHeader'></div>" ).appendTo( ".articleHeader" );
        $( "<div class='userNameContainer'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditFlair'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='subRedditName'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditDate'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditScore'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<i class='redditUpvote material-icons'>keyboard_arrow_up</i>" ).appendTo( ".redditScore" );
        $( "<p class='redditTitle clearfix mediaTitle news'></p>" ).appendTo( ".articleHeader" );
        $( "<div class='redditPost mediumtext'></div>" ).appendTo( ".articleHeader" );

    }

Primary issue:

1. Each individual div is being created 10 times instead of creating each div once and then starting over 10 times.

Any help is appreciated! As always.

Answer 1

Your problem is your use of appendTo(). Those calls are going to find every instance of those classes and append to each of them. You can simplify this greatly by just cloning the entire element to be copied and then append it to the container, like this:

var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
    $(".listrow").eq(0).clone().appendTo("#redditCardBox1");
}

If for some reason you can't do that and you need to individually append the elements, you just need to rework how you are appending to only append to the instances of those classes in the new row.

Something like this:

var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
    var row = $("<div class='listrow news nomargin'></div>").appendTo("#redditCardBox1");
    $("<div class='newsContainer'></div>").appendTo(row.find(".listrow"));
    $("<div class='redditThumbnail clearfix'></div>").appendTo(row.find(".newsContainer"));
    $("<div class='articleHeader read clearfix'></div>").appendTo(row.find(".newsContainer"));
    $("<div class='actionmenuHeader'></div>").appendTo(row.find(".articleHeader"));
    $("<div class='userNameContainer'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='redditFlair'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='subRedditName'></div>").appendTo(".actionmenuHeader"));
    $("<div class='redditDate'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='redditScore'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<i class='redditUpvote material-icons'>keyboard_arrow_up</i>").appendTo(row.find(".redditScore"));
    $("<p class='redditTitle clearfix mediaTitle news'></p>").appendTo(row.find(".articleHeader"));
    $("<div class='redditPost mediumtext'></div>").appendTo(row.find(".articleHeader"));
}

Answer 2

I'd use @dave's approach of cloning the nodes.

For the first row, though (assuming you don't already have it in the HTML already), I'd just append the HTML all in one string:

$('#redditCardBox1').append('<div class='listrow news nomargin'><div class="newsContainer"><div class="redditThumbnail clearfix floatleft"></div><div class="articleHeader read clearfix"><div class="actionmenuHeader"><div class="userNameContainer"></div><div class="redditFlair"></div><div class="subRedditName"></div><div class="redditDate"></div><div class="redditScore"><i class="redditUpvote material-icons">keyboard_arrow_up</i></div></div><p class="redditTitle clearfix mediaTitle news"></p><div class="redditPost mediumtext"></div></div></div></div>');

I don't think you need to break it up like that.