Javascript：更改innerHTML vs display

Question

我正在開發一個web窗體，我希望根據用戶以前選擇的內容顯示不同的輸入。所以我想知道有一個空的div，並改變它與innerHTML包含有什麼區別，有幾個div元素，將顯示設置爲無，並根據用戶輸入更改顯示。

謝謝！

Answer 1

根據需要隱藏和顯示元素幾乎總是效率更高，而不是創建元素然後銷燬它們。

這主要是因爲向文檔添加節點是一個計算量很大的操作，即使innerHTML已高度優化。其次，這是因爲銷燬元素也意味着你銷燬了存儲在這些元素上的任何事件處理程序，這意味着你必須重新綁定它們，這自然需要時間和不必要的代碼。

另一個優點是，如果用戶禁用了Javascript或使用了不支持它的瀏覽器，Javascript將無法工作，例如，一個屏幕閱讀器。如果您的所有元素都存在於您的原始HTML中，則該頁面至少對這些用戶有一定意義。

Answer 2

如果你有你的div準備好了，只需更改顯示：

• 的代碼更簡單
• 你只有一個存儲位置爲您的內容（的div）
• DOM不會必須由引擎重新計算

這是標準的解決方案，當處理標籤的例子。

Answer 3

通常，您應該儘可能少地觸摸innerHTML，而不是使用JavaScript命令（如createElement和appendChild）。

許多innerHTML操作被認爲是javascript中的一種反模式。

這就是說，如果你有一個單一的表格或2-3表格，你可以繼續前進，做一些適合你的工作。意思是你認爲更容易理解和更易於維護的代碼。

在這些尺度上，我懷疑任何人都會注意到使用這兩種方法的性能增益/排便。我個人可能會將顯示設置爲無。

Answer 4

如果您更改了innerHTML的元素，那麼只有在提交表單時纔會提交所顯示的輸入。

通過與display隱藏元素，它們仍然存在於表單中，仍將提交。

Answer 5

如果您按類和ID選擇div並將它們打開和關閉，它會更快。但是，如果僅使用簡單的文本，因爲您不會注意到速度差異，我只會使用innerHTML。除非有理由有不同的div IE的選擇具有截然不同的內容，也許圖形vs文本VS表格，那麼我會做出不同的div。

總之，他們都做同樣的事情。