Using jquery append() puts the appended content outside of the appended background

Question

I'm using the append function to add different divs, images, links and text onto my html. When I do this though, the content that I get from a JSON file that I'm trying to append is being placed outside of the background that I want it to be placed on. Here is what the content is supposed to look like:

http://i.stack.imgur.com/iShVe.png

The image and text is placed onto the gray background when I create this html content myself, but when I try to create all this content with append(), it puts all the content to the left of the background:

Here is also the codepen that I'm doing it on if you needed to see that: http://codepen.io/JaGr/pen/XXMPQY

html:

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

<div>
  <div class="header">
    <div>
      Camper
    </div>
    <div>
      News
    </div>
  </div>

  <div class="stories">


    <div class="story">
      <img src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png" class="profilePicture">
      <div class="headline"><a href="#">Test Headline</a></div>
      <div class="author"><a href="#">by - TestName</a></div>
      <div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon"> 13</div>
    </div>

  </div>
</div>

css:

body {
  background-image: url("http://s22.postimg.org/bondz7241/grey_wash_wall.png")
}


.header {
  font-family: 'Oswald', sans-serif;
  font-size: 100px;
  float: left;
  color: #A9A9A9;
  border-right-style: solid;
  border-bottom-style: solid;
  margin-left: 20px;
  margin-top: 10px;
  padding-right: 135px;
  padding-bottom: 18px; 
  width: 210px;
  margin-bottom: 29px;
}


.story {
  text-align: center;
  float: right;
  background-color: #A9A9A9;
  width: 230px;
  height: 330px;
  margin-bottom: 30px;
  margin-right: 30px;
  box-shadow: 2px 2px 13px;

}

.headline, .author, .likes {
padding-top: 7px;
  font-family: 'Droid Serif', serif;
}
.likes {
  vertical-align:middle
  padding-top: 5px;
}
a {
  text-decoration: none;
  color: #0052cc;
}
.profilePicture {
  width: 230px;
  height: 230px;
}

.heartIcon {
  width: 15px;
  height: 15px;
}

javascript:

$(document).ready(function() {
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {

    for (var x = 0; x < json.length; x++) {     
      var headline = json[x].headline;
      var headlineLink = json[x].link;
      var authorName = json[x].author.username;
      var authorNameLink = "http://www.freecodecamp.com/" + authorName;
      var authorPicture = json[x].author.picture;
      var likes = json[x].rank;

      if (headline.length > 15) {
          headline = headline.slice(0, 16);
          }


      var divStory = '<div class="story">'
      var profilePic = '<img src="' + authorPicture + '"' + ' class="profilePicture">'
      var divHeadline = '<div class="headline"><a href="' + headlineLink + '">' + headline + '</a></div>'
      var divAuthor = '<div class="author"><a href="' + authorNameLink + '">by - ' + authorName + '</a></div>'
      var divLikes = '<div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">' + likes + '</div>'
      var lastDiv = '</div>'



      $(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)

    }
  });
});

I think my html and css is OK, it works alright when I type in the code myself; it's just the javascript that introduces the problem. I've checked the variables and incoming JSON and they both seem fine as well, so I think the problem is just with append() itself, but I don't know exactly whats causing it.

Answer 1

It is the jquery append multiple elements.

$(".stories").append(divStory, profilePic, divHeadline, divAuthor, divLikes, lastDiv)

I haven't found out exactly why it created the issue, but change it to will fix the problem.

$(".stories").append(divStory + profilePic + divHeadline + divAuthor + divLikes + lastDiv)

Check fix here

Answer 2

Did u ever use the devtools? (F12)
They're pretty useful, and you can see on first sight that your elements aren't wrapped into the .story -tags.

I'd do it like this:

var tplStory = '\
<div class="story">\
  <img src="{{authorPicture}}" class="profilePicture">\
  <div class="headline"><a href="{{headlineLink}}">{{headline}}</a></div>\
  <div class="author"><a href="{{authorNameLink}}">by - {{authorName}}</a></div>\
  <div class="likes"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-128.png" class="heartIcon">{{likes}}</div>\
</div>';

$(".stories").append(
    divStory
    .replace('{{authorPicture}}', authorPicture)
    .replace(...)
)