Как создать группу дивов с классами с помощью JQuery?

Question

[Intelix]

Здравствуйте.
Нужно скриптом добавить внутрь определенного div набор других дивов с своими классами.

Есть такой блок:

<div class="modal-body">
</div>

Нужно в его тело добавить такой код:

<div class="row">
      <div class="col-4">
            <div class="aB"><img src="" class="aI" id="a0"></div>
      </div>
      <div class="col">
            <div class="txt"></div>
      </div>
 </div>

Подскажите пожалуйста как это можно реализовать.

Answer 1

[Sanovskiy]

Я примерно так делаю. Но, думаю, это неоптимально.

$('.model-mody').append(
    $('<div>')
        .addClass('row')
        .append(
            $('<div>')
                .addClass('col-4')
                .append(
                    $('<img>').attr('id', 'a0').addClass('aI').attr('src', '')
                )
        )
        .append(
            $('<div>').addClass('col').append(
                $('<div>').addClass('txt')
            )
        )
);

Answer 2

[nvdfxx]

$('.modal-body').append(`<div class="row">
      <div class="col-4">
            <div class="aB"><img src="" class="aI" id="a0"></div>
      </div>
      <div class="col">
            <div class="txt"></div>
      </div>
 </div>`)

Comments

[Sanovskiy]

Выглядит вырвиглазно. Мой вариант и то лучше имхо.

[nvdfxx]

Sanovskiy, чем лучше? кучей лишних действий? И что вырвиглазного в обычной строке?

[Sanovskiy]

nvdfxx, jQuery эту кучу лишних действий все равно произведет "под капотом"
Явно лучше, чем неявно.

[nvdfxx]

Sanovskiy, ничего он не произведет, это обычный innerHtml. Задача у человека - вставить один div в другой, для чего отдельно каждое действие проделывать, непонятно

[Sanovskiy]

nvdfxx, понимаю вашу позицию. На работу я бы вас не взял.

[nvdfxx]

Sanovskiy, после слов про "работу под капотом", я бы и сам с собеса убежал

[I'm Yoda]

Sanovskiy, лол

Answer 3

[Ruslan Ruslanov]

ну раз тут проводят паралемпиаду по js, то я тоже поучаствую:
вариант 1- vanilla.js
1. вставляете этот блок на ту страницу, где он вам нужен
2. добавляете id и style

<div id="hidden-block" class="row" style="display: none;">...</div>

3.js:

document.getElementById('hidden-block').style.display = 'block';

4. ???
5. PROFIT

вариант 2 - жквери
1. вставляете этот блок на ту страницу, где он вам нужен
2. добавляете id и style

<div id="hidden-block" class="row" style="display: none;">...</div>

3. жквери
$('#hidden-block').css('style','display: block');
4. ???
5. PROFIT

Comments

[Ruslan Ruslanov]

Sanovskiy, nvdfxx, как вам мой вариант?
имхо, всяко лучше, чем жквери.

[nvdfxx]

Ruslan Ruslanov, Прочитайте вопрос, прочитайте заголовок вопроса

[Ruslan Ruslanov]

nvdfxx, прочитал вопрос, прочитал заголовок вопроса.
возможно вы имели в виду, что код должен быть на жквери?
ок, дополнил.

[nvdfxx]

Ruslan Ruslanov, как-то вы невнимательно читаете, задача - вставить один блок в другой, цсс тут не нужен

[Ruslan Ruslanov]

nvdfxx, с какой целью нужно вставить один блок в другой?
правильно, чтобы отобразить конечному пользователю.
в моем вариант блок вставляется заранее, а потом просто меняется стиль дисплея.
мне кажется, что автору не нужно прям жкверей вставлять блок.
ведь главное, чтобы блок появлялся только тогда, когда его вызвали.
я правильно понял? Intelix?
или вам принципиально, чтобы блок именно создаваться и вставлялся жкверей?