Question

我有一个脚本

<script>

  $(document).ready(function(){
    var $body = $('body');
    $body.html('');

  var index = streams.home.length - 1;
  while(index >= 0){
    var msg = streams.home[index];
    var $msg = $('<div></div>');
    $msg.text('@' + msg.userID + ': ' + msg.message);
    $msg.appendTo($body);
    index -= 1;
  }
</script>

我已经放置在我的html文件正文的底部。但是，我不知道如何获取脚本生成的html文件。要么我可以看到HTML / CSS结果，要么只看到脚本（生成随机文本的行）。

<head>
  <script src="jquery.js"></script>
  <script src="lipsum.js"></script>
</head>
<body>
  <div id="container">
    <header> ... </header>
    <div id="main"> 
      // in the webpage, I would like to have the script results
      // display here
    </div>
  </div>
  <script>
    //see above
  </script>
</body>

我已尝试在各个地方移动脚本，并调整脚本的appendTo()，但无济于事。我该怎么做呢？

更新：包括我在头部的内容。正如Max Rocket的评论所述，lipsum只生成一个用户ID，然后是Lipsum Lorem文本。目标是模仿聊天室。我有文字，但我试图用HTML / CSS内容显示它。

Answer 1

编辑工作解决方案。我假设您的流对象与我在那里创建的对象类似，至少足够。

    $(document).ready(function() {
      var streams = {
        home: [
        {
          userID: "Tom",
          "message": "Lorem ipsum sit alor"
        }, {
          userID: "Dick",
          "message": "Gallia est provincia divese en partes tres"
        }, {
          userID: "Harry",
          "message": "Y tu mama tambien"
        }
       ]
      }

      var index = streams.home.length - 1;

      while (index >= 0) {
        var msg = streams.home[index];
        var $msg = $('<div></div>');
        $msg.text('@' + msg.userID + ': ' + msg.message);
        $msg.appendTo('#main'); // this is where it appends to #main
        index -= 1;
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <header>
    <h1>Chatroom</h1>
  </header>

  <div id="main">
  </div>

</div>

Answer 2

您的代码，

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

正在清除身体标签内的所有内容。包括您设置的任何脚本标记。因此，当您到达页面底部的JS代码时，它就不存在。您的代码永远不会触发。您应该缩小清除功能的目标。

$body.html(''); // This take the body element and clears it.

尝试特定的内部DOM元素，如div或span。

如何将jQuery脚本集成到我的html文件中？

2 个答案: