Applying Card style to individual Google Feed API result

Question

So I'm using the Google Feed API per the guide here

My HTML head contains this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("feeds", "1");
    function initialize() {
        var feed = new google.feeds.Feed("http://feeds.ign.com/ign/game-reviews");
        feed.setNumEntries(20);
        feed.load(function (result) {
            if (!result.error) {
                var container = document.getElementById("feed0");
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    var card = document.getElementById("card");
                    card.appendChild(document.createTextNode(entry.title));
                    card.appendChild(document.createTextNode(entry.contentSnippet));
                    card.appendChild(document.createTextNode(entry.link));
                    container.appendChild(card);
                }
            }
        });
    }
    google.setOnLoadCallback(initialize);
</script>

And then in the body I've got:

<article id="feed0">
    <div id="card"></div>
</article>

I'm trying to style each feed entry individually as one "card" in my css, with the ultimate goal of creating something that looks like the Google+ feed:

#feed0, #feed1{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
}
#card{
    border:1px solid gainsboro;
    background-color:white;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
    font:10px Tahoma;
    margin:8px;
    padding:15px;
}

What I'm getting instead of having the style apply to each feed result, is one box styled properly, but it contains all the feeds inside.

How can I apply the style to each individual feed result, instead of all of them collectively?

Answer 1

Basically you are selecting a single DOM element, then trying to append it, but it's a single element.

Here is my example, I used jquery and Array.forEach to simplify: http://cdpn.io/HLJqd

jQuery is not required, it was just a lot faster.