如何在javascript中创建高于其他标签的html标签

How to create an html tag above others in javascript?

本文关键字：标签 其他 html 高于 创建 javascript      更新时间：2023-09-26

所以我正在尝试制作这个东西，当你按下一个按钮时，它会在可滚动的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（）

相关文章：