脚本未出现在中间，并且覆盖了CSS

Question

当我注释掉脚本时，所有CSS样式都在那里；但是当我重新添加脚本时，脚本显示在左上角，而CSS不再存在了？我在做什么错？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column right">
    right
  </div>
  <div class="column mid" id="parent">
    mid
    <script>
      $(document).ready(function() {
        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.appendTo($body);
          index -= 1;
        }
      });
    </script>
  </div>
  <div class="column left">
    left
  </div>
</div>