javascript - 使用 jquery append() 将附加内容放在附加背景之外

Question

我正在使用附加功能将不同的 div、图像、链接和文本添加到我的 html 中。但是，当我这样做时，我从我试图附加的 JSON 文件中获取的内容被放置在我希望它放置的背景之外。内容应该是这样的:

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

当我自己创建这个 html 内容时，图像和文本放在灰色背景上，但是当我尝试使用 append() 创建所有这些内容时，它会将所有内容放在背景的左侧:

如果您需要查看，这也是我正在做的代码笔: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)

    }
  });
});

我认为我的 html 和 css 没问题，当我自己输入代码时它工作正常；只是引入问题的javascript。我已经检查了变量和传入的 JSON，它们看起来也很好，所以我认为问题出在 append() 本身，但我不知道到底是什么导致了它。

Answer 1

就是jquery追加多个元素。

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

我还没有找到造成问题的确切原因，但将其更改为将解决问题。

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

检查修复 here