javascript-如何防止document.write跳出Div框？

我正在创建一个战斗日志，战斗信息将进入一个可以容纳大约15行的div框中。超过16行后，文本穿过框并开始向南移动

Javascript中有没有一种方法可以说“嘿，在15行之后，创建一行新行，然后删除最后一行！”

我想我应该用数组来设置它。是这样吗？在那里我会说一些关于。。15个元素，在16个元素之后，删除最后一个元素并推送一个新元素

这是我所有的代码：

document.getElementById("log").innerHTML += "Fight Log";

---

超过15条后，它将跳出DIV战斗日志框。

尝试将这些消息添加到数组中，并每次重新呈现所有消息。通过这种方式，您可以使用数组方法来管理消息数：

var log = [],
  messageElem = document.getElementById("log");    

function addMessage(message) {
  log.push(message);
  while (log.length > 16) {
    log.shift();
  }
  messageElem.innerHTML = log.join("\n");
}


... then later ...

addMessage('Fight Log');

---

这取决于你的div是怎样的，它可能有固定的大小。尝试指定style=“overflow:auto；”，以便在消息超出范围时显示滚动条。

用

span

包装日志消息，使其成为可选择的DOM项。选择15+时的最后一个并将其删除。这是如何做到的

function addMessage(message) {
    var logElement = document.getElementById('log');
    var elements = document.getElementById('log').getElementsByTagName('span');
    var length = elements.length;
    if(length >= 15) {
        logElement.removeChild(elements[length-1]);
    }
    logElement.innerHTML += "<span>" + message + "</span>";
}

for(var i=1; i<30; i++) {
    addMessage('Figth Log ' + i);
}

函数addMessage（消息）{
var logElement=document.getElementById（'log'）；
var elements=document.getElementById（'log'）.getElementsByTagName（'span'）；
变量长度=elements.length；
如果（长度>=15）{
logElement.removeChild（元素[length-1]）；
}
logElement.innerHTML+=“”+消息+“”；
}
对于（var i=1；i请发布您的代码。发布您的代码，我们可以根据您的要求对其进行编辑。您应该将“战斗日志”包装在一个元素（如段落）中并使用文档。getElementsByClassName（“p”），检查长度，如果它符合您的要求，则删除第一个/最后一个（无论您希望什么）.overflow scroll？最好添加一个干净的滚动条，并在每次添加新内容时滚动到底部。document.createElement会更好。