关于在html代码上放置隐藏div元素的最佳实践(Best practice on where to place the hidden div elements on html code)

关于在html代码上放置隐藏div元素的最佳实践(Best practice on where to place the hidden div elements on html code)

这是一个最佳实践问题。 我正在开发一个HTML模板，我希望根据用户交互显示/消除div元素。 我使用JQuery，一切正常。

添加到我需要隐藏的div：

style="display: none;"

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

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

然后我相应地将它们附加到相应的父div。

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

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

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

对此有什么好处？

This is a best practice question. I am working on a HTML template in which I want to appear/disappear div elements based on user interaction. I use JQuery for that and everything works ok.

Adding to the divs I need to hide:

style="display: none;"

works nicely and it doesn't add any additional empty lines when the div is hidden.

My question is where is the best place to place all these hidden divs. Right now I place all of them just before the end of my element.

Then I append them accordingly to corresponding parent divs.

Ofcource I could place the whole div in quotes and put it in the append function as:

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

But this causes readability issues and doesn't look nice in the code.

What would be a good practice for this?

最满意答案

我会把它们放在你希望它们实际出现的地方，但显然最初会隐藏它们（就像你现在所拥有的那样）。 然后使用show / hide方法显示它们，而不是附加它们：

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

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

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

并再次隐藏它：

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

I would place them where you want them to actually appear, but obviously have them hidden initially (like you have got now). Then use show/hide methods to display them, rather than appending them:

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

... Then when you want to display it:

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

And to hide it again:

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