jQuery追加代码不会追加我的div

Question

我试图：

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

2. 从那里追加

3. 然后找到img类avatar-main，然后将img网址放在此处

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

您有很多问题。

• 首先，您尝试在代码中使用class而不是id。
• 您不能将字符串扩展为多行
• 您追加到div，但在框中查看。 我把它们放在盒子里
• 您还可以在创建框引用时对其进行缓存（并非必须）
• 您正在使用.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>