jQuery'prepend正在替换我的内容，而不是将其添加到开头

这是因为当提交表单时，页面会被重新加载。因此，您的内容并没有真正被替换，事实上发生的是（1）页面重新加载，清除所有内容，以及（2）作为参数添加到URL的输入，现在作为第一个也是唯一的内容预先添加到列表中。

为了防止这种情况，您可以：

1. 通过更改
   防止表单的默认行为$("form").on("submit", postMessage());到
   CCD_ 2。

2. 将<input type="submit" />更改为<input type="button" />（常规按钮），完全绕过整个提交问题。由于表单不需要提交，所以提交按钮确实没有必要，甚至有点错位。你也不需要阻止任何默认行为，在我看来，这要干净得多
   我喜欢这个选项，所以我将在下面更详细地解释这个选项：

$(window).on("load", function(){
  $(".input").click(function() {
    $(this).select();
  });
  
  $("#search .submit").click(function(){
    var currentTime = new Date().getSeconds(),
        thoughts = $("#search .input").val(),
        message = "<li>" + thoughts + " - " + currentTime + " seconds </li>";
    $("#list").prepend(message);  
  });
});

html{
  height: 100%;
}
body{
  background: #fff;
  font-size: 13px;
  min-width: 800px;
}
br{
  clear: left;
}
#header{
  background:cornflowerblue;
  padding: 10px 5px;
  box-shadow: 0px 1px 5px #fff;
  text-align:center;
}
#search{
  display: inline-block;
}
.input{
  width: 300px;
  padding: 2px 3px;
  border: 2px solid #A2C4DA;
  font-size: 1.2em;
  line-height:2;
}
.submit{
  padding: 6px 12px;
  vertical-align: top;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff;
  background:#fff;
  border: 1px solid #6FD6F7;
  line-height:2;
}
.submit:hover{cursor:pointer;}
#page{
  width: 800px;
  background: dodgerblue;
  border: 1px solid #ffffff;
  margin: 10px auto 0px;
  padding: 1em 2em;
  font-size:2em;
}
#page li{
  list-style:none;
  text-align:center;
  color: #fff;
  border-top:1px solid #fff;
}
#page li:nth-child(n+1){
  border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="search">
    <form>
      <input type="text" class="input" placeholder="thoughts?" />
      <input type="button" class="submit" value="Post" />
    </form>
  </div>
  <br>
</div>
<div id="page">
  <ul id="list"></ul>
</div>

• 因为页面不再重新加载，所以不能再使用thoughts = getParameter("post")。由于页面不会重新加载，因此不会在URL中添加任何参数
  为了使其再次工作，我将该行更改为thoughts = $("#post").val()。

• 我给了<input type="text"/>和<input type="button"/>这两个类，所以它们可以被JS和CSS引用。我从输入字段中删除了name，因为在这种情况下不需要它
  （我本可以用ID代替类，但类给了你更多的灵活性。例如，如果你想在页面上有第二个输入表单，就像这个一样，你可以复制粘贴它，除非<div id="search">需要另一个ID。然后，在JS中，你制作了另一个点击处理程序，比如$("#search .submit").click(，你也可以将#search更改为新的ID。
  但在CSS中，您不必更改任何内容，因为类.input和.submit的CSS规则也将为新的输入字段和按钮设置样式。）

• 我相应地更新了CSS选择器以引用新的类
• 我从你的表格中删除了method="get"，因为它不再使用或需要了
• 我删除了getParameter()函数，因为您不再需要它了
• 我添加了$("#input").click(...功能，当你点击它时，它会选择输入字段中的所有文本。这不是必要的，但我认为它可能更方便用户
• 我用window.load包装了你的代码。这是一种很好的做法，可以确保在页面完全加载之前不会执行代码

在您的代码中，提交按钮是提交表单，从而导致整个页面被重新加载/重置。页面的重新加载会导致<ul>在没有内容的情况下重新加载，然后插入内容。每次都会重复此操作。您可能需要考虑不使用$("form").on("submit", function(e){e.preventDefault(); postMessage();});0处理来获取输入数据。