因此,我试图将其制作成在您按下按钮时会在可滚动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()