Question

很多天以来，如果我想添加<br>或elem.innerHTML += '<br>'来添加document.createElement('br')，整个网站就会崩溃。但是，如果我用普通的字母来完成此操作，那就很好了。

  function setSpace(elem){
    if((elem.clientHeight-49)/16 >= 1){
      for(var i=0; i <= (elem.clientHeight-49)/16; i++){
        elem.innerHTML += '<br>';
      }
    }
  }

我该如何解决这个问题？

Answer 1

循环可能永远不会结束，因为您会在每次迭代中延长元素的高度，这也会影响循环的停止条件。 elem.clientHeight增加，并且i可能永远不会大于(elem.clientHeight-49)/16。

一种解决方法是先将限制放入变量中，然后使用该变量：

 function setSpace(elem){
    let end = (elem.clientHeight-49)/16;
    if (end >= 1){
      for(var i=0; i <= end; i++) {
        elem.innerHTML += '<br>';
      }
    }
  }

...但是要格外小心，因为下次您调用setSpace时，它将添加更多的换行符。如果继续调用此函数，您将永远不会停止添加换行符。

查看此代码的真正目的。

有更好的方法来增加元素的间距，例如使用CSS padding-bottom。

Answer 2

我相信它与this一样。

每次设置innerHTML时，都必须解析HTML，构造DOM并将其插入文档中。这需要时间。

这导致您的浏览器崩溃。实际上没有崩溃，但仍在处理。

解决方案是，您需要使用appendChild。

function setSpace(elem) {
    var space = document.createElement('div');
    var count = (elem.clientHeight-49)/16;

    if (count >= 1) {
        for (var i=0; i <= count; i++) {
            elem.appendChild(space);
        }
    }
}

Answer 3

您的代码似乎可以正常工作，并且不会崩溃。
如果您想通过添加额外的
来增加高度，那不是正确的方法。
1. 相反，建议通过更改样式属性直接更改高度

Answer 4

您可以尝试：elem.innerHTML += '\n'

JavaScript在添加<br>时崩溃

4 个答案: