Лучшая практика по размещению скрытых элементов div на html-коде

Question

Это вопрос наилучшей практики. Я работаю над шаблоном HTML, в котором я хочу отображать/исчезать элементы div на основе взаимодействия с пользователем. Я использую JQuery для этого, и все работает нормально.

Добавление к дивы мне нужно, чтобы скрыть:

style="display: none;" 

работает хорошо, и он не добавляет никаких дополнительных пустых строк, когда ДИВ скрыта.

Мой вопрос: где лучше всего разместить все эти скрытые div. Прямо сейчас я помещаю их всех перед концом своего элемента.

Затем я добавляю их соответствующим соответствующим родительским div.

Ofcource Я мог бы поместить весь DIV в кавычки и поставить его в функции дописывания как:

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

Но это вызывает проблемы удобочитаемости и не хорошо выглядеть в коде.

Что было бы хорошей практикой для этого?

Answer 1

Я бы разместил их там, где вы хотите, чтобы они на самом деле появлялись, но, очевидно, они были скрыты изначально (например, у вас есть). Затем с помощью методов показать/скрыть, чтобы отобразить их, а не добавляя их:

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

... Затем, когда вы хотите, чтобы отобразить его:

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

И, чтобы скрыть его снова:

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