性能/卓越设计问题innerHTML +=与appendChild("li")

Question

我有一个输出日志div，它通常会随着时间的推移而包含数百个条目，并以增量方式添加到其中。是否最好通过以下方式增加新的产出：

myDiv.innerHTML += "Another logged message<br/>";

或者通过如下方式向DIV添加一个LI子元素：

            var listItem = document.createElement("li");
            listItem.innerHTML = rowData.replace(/\s+$/,'');
            listItem._key = rowKey;
            myDiv.appendChild(listItem);

我不打算需要事件或其他用户与单个消息的交互。只是显示目的。

有关系吗？

Answer 1

附加到innerHTML将替换和重新解析整个现有的HTML结构。

它将失去用户状态(例如，焦点)、属性、事件处理程序和HTML中的任何其他状态，而且速度会慢得多。

你不该那么做。