jQuery Append 代码不会附加我的 div

Question

我试图：

1. 获取 div.main-content（这是主 div）

2. 从那里追加

3. 然后找到img class avatar-main，把img url放在那里

4. 然后获取 h5 类 fullName 并放入 fullName 和 span 类 userNameMain 并将用户名放在那里，将 timePosted 类放在那里并放上发布的时间

5. 然后获取段落类tweetContent并将文本放在那里

6. 最后我将附加一个带类的静态 uls：

这是我的 jQuery 代码：

$(document).ready(function(){
  ativeTweets();
});

function ativeTweets(){
  var index = streams.home.length - 1;
  while(index >= 0){
    var tweet = streams.home[index];
    var $tweet = $('div.main-content');
    $tweet.append('<div class="box-content"></div>');
    $tweet.append('<img src="" align="left" class="avatar-main">');
    $tweet.append('<h5 class="fullNameMain"> <span class="userNameMain"> <span class="timePosted">* 5h</span></span></h5>');
    $tweet.append('<p class="tweetContent"></p>');
    $tweet.append('<ul class="activities">
                <li><span class="comment"></span> 48K</li>
                <li><span class="retweet"></span> 50K</li>
                <li><span class="heart"></span> 100K</li>
                <li><span class="msg"></span> 22K</li>
              </ul>');
    $('.box-content').find('.avatar-main').attr('src', 'img/' + tweet.user + '.jpg');
    $('.box-content').find('.fullNameMain').text(tweet.user);
    $('.box-content').find('span.userNameMain').text('@' + tweet.user);
    $('.box-content').find('span.timePosted').text(new Date());
    $('.box-content').find('.tweetContent').text(tweet.message);
    index -= 1;
  }
}

我不确定，但由于某种原因，这些代码不起作用，并且根本不会在 div 上附加任何内容：

<div id="main-content"></div>

错误：

未捕获的 SyntaxError：无效或意外令牌

我在这里做错了吗？请帮忙！

Answer 1

你有很多问题。

• 首先您尝试在代码中使用类而不是 id。
• 您不能将字符串扩展到多行
• 您追加到 div 但查看框。我把它们放在盒子里
• 您还可以在创建 box ref 时对其进行缓存（并非绝对需要）
• 您使用 .text 并覆盖了包含的元素

$(function() {
  ativeTweets();
});
var streams = {};
 streams.home= [{user:"one",message:"on mess"},{user:"two",message:"on two mess"}];//just to run locally
function ativeTweets() {
  var scount = streams.home.length;
  var index = streams.home.length;
  while (index--) {
    var tweet = streams.home[index];
    var $tweet = $('#main-content');
    $tweet.append('<div class="box-content"></div>');
    var mybox = $tweet.find('.box-content').last();
    mybox.append('<img src="" align="left" class="avatar-main">');
    mybox.append('<h5 class="fullNameMain"> <span class="userNameMain"> <span class="timePosted">* 5h</span></span></h5>');
    mybox.append('<p class="tweetContent"></p>');
    mybox.append('<ul class="activities">' +
      '<li><span class="comment"></span> 48K</li>' +
      '<li><span class="retweet"></span> 50K</li>' +
      '<li><span class="heart"></span> 100K</li>' +
      '<li><span class="msg"></span> 22K</li>' +
      '</ul>');
    mybox.find('.avatar-main').attr('src', 'img/' + tweet.user + '.jpg');
    mybox.find('.fullNameMain').prepend(tweet.user);
    mybox.find('span.userNameMain').prepend('@' + tweet.user);
    mybox.find('span.timePosted').text(new Date());
    mybox.find('.tweetContent').text(tweet.message);
    
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-content"></div>