Javascript removeChild（）和appendChild（）VS display = none和display = block | inline [英] Javascript removeChild() and appendChild() VS display=none and display=block|inline

问题描述

我正在开发一个动态显示一些控件和描述的Web应用程序（我不想使用jQuery或其他库）。

I'm developing a web application that shows some controls and descriptions dynamically (I don't want to use jQuery or other libraries).

此刻我使用以下方式显示和消失控件：

At this moment i make appear and disappear controls using:

element.setAttribute("style", "display : inline");

和

element.setAttribute("style", "display : none");

但我正在考虑使用：

element.appendChild(childRef);

和

element.removeChild(childRef);

那么，就系统速度和代码的优雅而言，哪一个是最佳解决方案？
或者有更好的方法吗？

So, which one is the best solution in terms of system speed and elegance of the code? Or is there a better way to go about this?

推荐答案

element.appendChild（ childRef）; 和 element.removeChild（childRef）; 都使浏览器操作DOM树，而更改CSS只会更改其中一个属性。

element.appendChild(childRef); and element.removeChild(childRef); both make the browser to manipulate the DOM tree while changing CSS just changes one of the attributes.

因此，更改CSS的速度更快。

So, changing CSS is faster.

Dev Opera 说

当一个元素的显示样式设置为none时，即使其内容被更改，也不需要重新绘制，因为它没有显示。这可以作为一个优点。如果需要对元素或其内容进行多次更改，并且无法将这些更改组合到单个重绘中，则可以将元素设置为display：none，可以进行更改，然后可以设置元素恢复正常显示。

When an element has its display style set to none, it will not need to repaint, even if its contents are changed, since it is not being displayed. This can be used as an advantage. If several changes need to be made to an element or its contents, and it is not possible to combine these changes into a single repaint, the element can be set to display:none, the changes can be made, then the element can be set back to its normal display.

这将触发两次额外的回流，一次隐藏元素，一次再次出现，但整体效果可以要快得多

This will trigger two extra reflows, once when the element is hidden, and once when it is made to appear again, but the overall effect can be much faster

---

另一篇相关文章解释了 reflow 和重绘

这篇关于Javascript removeChild（）和appendChild（）VS display = none和display = block | inline的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！