一旦达到一定长度，li元素如何相互覆盖？

Question

我是编码的新手，正在从输入框中创建li元素。但是，我希望它们在达到8时停止创建新元素，并开始覆盖以前的元素。任何建议都很好！这是我当前用于在定义的ul中创建li项目的代码。

 function addLI() {
var txtVal = document.getElementById("cityInput").value,
  listNode = document.getElementById("list"),
  liNode = document.createElement("li"),
  txtNode = document.createTextNode(txtVal);
liNode.setAttribute("class", "list-group-item");

liNode.appendChild(txtNode);
listNode.appendChild(liNode);

}

谢谢您的帮助！