关于在 html 代码中放置隐藏 div 元素的最佳实践

Question

这是一个最佳实践问题。我正在开发一个 HTML 模板，我想在其中 appear/disappear div 基于用户交互的元素。 我为此使用 JQuery 并且一切正常。

添加到我需要隐藏的 divs:

style="display: none;"

工作得很好，当 div 被隐藏时它不会添加任何额外的空行。

我的问题是放置所有这些隐藏的 div 的最佳位置在哪里。现在，我将所有这些都放在元素末尾之前。

然后我将它们相应地附加到相应的父 divs.

Ofcource 我可以将整个 div 放在引号中并将其放在附加函数中：

$("#_panel_msg").append('<br><i> Downloading excel file with settlements..</i><br>');

但这会导致可读性问题并且在代码中看起来不太好。

对此有什么好的做法？

Answer 1

我会将它们放置在您希望它们实际出现的位置，但很明显，它们最初是隐藏的（就像您现在所做的那样）。然后使用 show/hide 方法来显示它们，而不是附加它们：

<div id="myDiv" style="display:none">Contents</div>

... 然后当你想显示它时：

$("#myDiv").show();

并再次隐藏它：

$("#myDiv").hide();