Как правильно добавлять блок на страницу через jq?

Question

[Tizi]

Не могу понять как правильно добавлять div на страницу после нажатия на кнопку.
Мы имеем вот такой div

div

<div class="row_info_box">
                  <div class="box_wrapper">
                    <i class="fas fa-book"></i>
                    <p class="name_subscription">имя подписки</p>
                  </div>
                  <div class="box considers">
                    <p class="status">Расматривается</p>
                    <i class="fas fa-angle-down" id="arrow_info_hiden"></i>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 1</p>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 2</p>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 3</p>
                  </div>
                </div>

Я решил сделать добавление по нажатию после определенного элемента (.after())
Но каким методом append() / html() добавлять блок я так и не понял. Хочу что бы код блока в jq выглядел более менее адекватно. подскажите кто что знает или как вы решаете данные проблемы

Answer 1

[Nick Sdk]

$('html вашего DIV').insertAfter('селектор(ы) определенного элемента'); // вставить после определенного элемента

Comments

[Tizi]

получается я не избегу не красивого кода блока в jq будет что то типо
<div><div><p>текст</p></div></div>
??

[Nick Sdk]

Tizi, "не красивого"?
это какого?
а что вы подразумеваете под "красивым"? :)

[Nick Sdk]

Tizi, можно добавлять немного по-другому

$('<div>', {
  'class': 'row_info_box',
  'html': `<div class="box_wrapper">
                    <i class="fas fa-book"></i>
                    <p class="name_subscription">имя подписки</p>
                  </div>
                  <div class="box considers">
                    <p class="status">Расматривается</p>
                    <i class="fas fa-angle-down" id="arrow_info_hiden"></i>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 1</p>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 2</p>
                  </div>
                  <div class="row_info_hiden hiden">
                    <p>row 3</p>
                  </div>`
}).insertAfter('в нужном месте');

но я так понимаю, что вас это тоже мало устроит)

[Tizi]

Nick Sdk, Это наоборот отлично я просто думал про лютейшую строку в

$('html вашего DIV').insertAfter('<div><div><p>текст</p></div></div>'); // вставить после определенного элемента

Answer 2

[Дмитрий Гормаш]

Как вариант, можно добавить нужный вам блок в хтмл(где то внизу, где он вам не будет мешать и скрыть). Через jq найти этот блок и записать его в переменную. А дальше эту переменную вставлять куда вам надо. Так себе решение, но мб пригодится.