因此,我试图将其制作成在您按下按钮时会在可滚动div中添加一行文本的地方。但是,每当我按下按钮时,当我希望新段落出现在最后一段的上方时,新段落就会出现在最后一段的下方。
到目前为止,我已经做到了:



function addToLog(user, action) {
  // Setting up local variables
  var newEntry = document.createElement("p");
  var entryText;
  var battleLog = document.getElementById("log");

  // Applying style
  newEntry.style.color = "black";
  newEntry.style.margin = 0;

  // Checking possible inputs
  if (user === 'player' && action === 'attack') {
    entryText = document.createTextNode("Player attacked the enemy for some damage!");
  } else {
    entryText = document.createTextNode("Error");
  }

  // Placing text into log
  newEntry.appendChild(entryText);
  battleLog.appendChild(newEntry);
};

#log {
  background-color: lightgray;
  height: 300px;
  width: 900px;
  overflow-y: scroll;
}
#attack:hover {
  color: red;
}
.button {
  border: 2px solid white;
  background-color: gray;
  height: 16px;
  width: 75px;
  text-align: center;
  display: inline-block;
}
.button:hover {
  color: black;
  font-weight: bold;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="attack" ; class="button" onClick="addToLog('player','attack')">Attack</div>
  <!-- Displaying action log -->
  <div id="log"></div>
  <!-- Starting game script -->
  <script type="text/javascript" ; src="gameScript.js"></script>
</body>

</html>





我最终将当前项目的一部分粘贴到这里,所以看起来可能很混乱。
如您所见,当您单击“攻击”按钮时,文本将显示在操作日志中。但是,每个新段落都出现在操作日志的最底部,当我希望它出现在顶部时。有什么办法可以将每个新段落放在最前面吗?
抱歉,如果我在这里找不到任何东西,我已经尝试过搜索所有内容,然后再问自己。提前致谢!

最佳答案

尝试使用insertBefore()而不是appendChild()

09-06 01:31