重建 twitter 克隆中的 JQuery/HTML 关系答案

【问题标题】：JQuery/HTML relationship in rebuilding twitter clone重建 twitter 克隆中的 JQuery/HTML 关系
【发布时间】：2016-04-27 00:55:30
【问题描述】：

我正在构建一个 Twitter 克隆。一段时间以来，我一直在摆弄东西，但到目前为止，还没有骰子。

我看到了

 var $body = $('body');
 $body.html('');

清除所有可以在脚本加载之前编写的 html 标签（对吗？）

在whats here的情况下，当我尝试在脚本本身中添加html元素时，为什么它仍然不可见？例如为什么标题不来自

$upTop= $('<h1>Twittler</h1>').appendTo($body)

当我将它附加到正文时出现？我在这里环顾四周，虽然有类似的问题，但我没有找到可以帮助我完成此任务的明确/确定的答案。我想一旦我弄清楚“div”和 $body 在代码中的操作方式之间的关系，我就可以开始了。请参阅下面带有 cmets 的代码源。

您的帮助已经收到。

<!DOCTYPE html>
<html>
<head>
  <title>Twittler</title>
  <script src="jquery.js"></script>
  <script src="data_generator.js"></script>
  <link rel ="stylesheet" href="Twittler.css">
</head>
<body>
<script>
  $(document).ready(function() { 
    var $upTop = $('<h1>Twittler</h1>').appendTo($body);
    var $body = $('body');
    $body.html('');

    var index = streams.home.length - 1;

    while(index >= 0) {
      var tweet = streams.home[index];
      var $tweet = $('<div></div>');
      $tweet.text('@' + tweet.user + ': ' + tweet.message);
      $tweet.prependTo($body);
      index -= 1;
    }
  });
</script>
</body>
</html>

<!--
Comments:
That file is called `data_generator.js`.  You don't need to understand the code that's in it, but here's what it does:

* Creates two global variables, `users` and `streams`.
  * `users` is an array of strings: all the usernames that you're following.
  * `streams` is an object with two properties, `users` and `home`.
    * `streams.home` is an array of all tweets from all the users you're following.
    * `streams.users` is an object with properties for each user.  `streams.users.albreyb` has all of `albreyb`'s tweets.
* Kicks off a periodic process that puts more data in `streams`.

You'll mostly be working in the javascript block of `index.html`. Note: The generated tweets will be displayed in reverse chronological order.


Basic Requirements:

- [ ] Show the user new tweets somehow.  (You can show them automatically as they're created, or create a button that displays new tweets.)
- [ ] Display the timestamps of when the tweets were created.
- [ ] Design your interface so that you want to look at and use the product you're making.
- [ ] Allow the user to click on a username to see that user's timeline.




We want to be able to have the new tweets show up (at the top of the page) when we click a button.
We want the old tweets to be maintained (in a different container/div?)
We want to be able to click the button again and shift those tweets down in to the container/div.. and so on.

-->

【问题讨论】：

我不太确定你的问题，因为你正在添加 Twitter h1 标签，然后你就清除了正文。下一个想法是：为什么你使用基本的 jQuery ......我认为更好的方法是 AngularJS，最好的方法是 Ruby on Rail.. 考虑一下

标签： javascript jquery html css twitter

【解决方案1】：

我对你的问题到底是什么有点困惑，但正如你所说的

var $body = $('body');
$body.html('');`

清理身体和

var $upTop = $('<h1>Twittler</h1>').appendTo($body);

添加到身体，但这些东西以相反的顺序运行。首先你要添加到正文然后清除它，所以最后它是空的。

【讨论】：