Question

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

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

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

和

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

但我正在考虑使用：

element.appendChild(childRef);

和

element.removeChild(childRef);

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

Answer 1

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

因此，更改CSS会更快。

Dev Opera说

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

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

Another relevant article解释了reflow和repaint

Answer 2

绝对继续使用显示属性。它们比删除/附加孩子要快得多，但最重要的是它们在每个浏览器中都能很好地工作。

我知道appendChild / removeChild应该在IE中得到很好的支持，但有时在我的IE7上，在添加新元素之后仍然可以移动（这只是我个人的体验）。

关于更改显示属性的方法，我只是做一个更简单的跨浏览器（在IE7模式下IE6 / 7和IE8也不支持setAttribute）：

element.style.display = 'none'; //for hiding an element
element.style.display = ''; //for showing that element again using its default way of displaying

使用display ='inline'显示元素是错误的，因为该元素默认情况下可能具有显示块显示方式，如DIV标记，并且您正在将其显示方式更改为内联方式不正确，可能导致页面中的元素从您期望的位置移出。

Answer 3

我怀疑这种方式有多少，即使有，我敢打赌它因实施而异（IE与Chrome对比Firefox vs. ...）。两者都会导致树中的重排事件。

显示和隐藏简单明了。添加和删除可以有其用途，但在大多数情况下可能是矫枉过正。首先，你必须保留对它的引用，以便稍后再添加它，你必须记住你需要将它添加回去的地方。

但是（这有点偏离主题）你的显示和隐藏机制有一些问题：

使用您的示例代码，事情只能是inline，而不是inline-block或block，这有点......限制。
您的代码也完全取代了该元素的样式信息（并且可能无法在IE上使用;请参阅David对您的问题的评论），因此直接应用于该元素的所有其他样式都将被吹走;请考虑使用元素的style属性：childRef.style.display = 'none";和childRef.style.display = "inline";（或block或...）。这样，你就不会打击元素上的任何其他样式。

完全从树上移除一个孩子（同时保留对它的引用以便以后可以将它放回去），但它确实有其用途。例如，当它不在树中时，当你用选择器行走树时，它就不会被找到，那就是另一个;这可能会有所帮助。

Answer 4

小一点：如果您碰巧在IE中处理用户可编辑元素（即在designMode“on”或在contenteditable为真的元素内部的文档内），则设置CSS { {1}} display的属性不会产生任何影响，您需要从DOM中删除元素以隐藏它们。

Answer 5

第一种方法更好我认为它只是隐藏和显示但不会从DOM中删除并再次添加。

Answer 6

我认为仅仅更新风格的表现会更好。

答案取决于您使用的元素。如果它们是否应该被显示是非常动态的，它可能是从DOM添加/删除的解决方案，但是如果有一组静态元素，则设置样式可能更容易。设置样式，您还可以更好地控制文档中的位置。添加/删除DOM，您需要确保它添加到正确的位置。

注意：
您可以使用element.setAttribute("style", "display:none");而不是element.style.display= "none";如果使用第一种方法，则会删除元素上的任何其他样式设置。

Answer 7

我认为编辑元素的样式会更快，但最好隐藏元素或将其从dom中删除，这取决于您的需要，如果您只需要隐藏元素或将其删除。
可能你不需要用户看到元素，但你需要对它做一些js逻辑，所以隐藏在这里将是最好的。

Javascript removeChild（）和appendChild（）VS display = none和display = block | inline

7 个答案: