Добавить контейнер div с дочерними элементами на веб-страницу?

Я пытаюсь создать кнопку, которая будет динамически добавлять контейнер div на веб-страницу, и в настоящее время я делаю это с помощью кода, который выглядит следующим образом внутри события.click():

$("<div id = 'some_id'></div>").appendTo("#somecontainer");

который сейчас работает нормально. Однако я знаю, что позже я добавлю больше элементов в этот контейнер div (до 3 или 4), поэтому мне интересно, есть ли лучший, более чистый способ сделать это. В противном случае я думаю, что мое заявление о добавлении начнет выглядеть примерно так:

$("<div id = 'some_id'><div id = '1'><div id = '2'>...</div></div></div>").appendTo("#somecontainer");

что не только кажется неправильным, но и сложным для структурирования. Какие-нибудь мысли?

Редактировать: кстати, эти дочерние элементы в конечном итоге будут стандартными текстом / значками, которые одинаковы во всех этих вновь созданных контейнерах, единственное, что изменяется, это некоторый введенный текст внутри.

Источник

4 ответа

Решение

Если вы хотите упростить редактирование в будущем, возможно, разбейте ваши различные элементы div на отдельные объекты, а затем объедините их в конце

делает его очень многословным, но немного легче поддерживать

$('button').click(function() {
    var parent_container = $('<div id="1">Parent Container</div>'),
        section1 = $('<div id="2">Sub Section 1</div>'),
        subsection1 = $('<div id="3">Content within subsection 1</div>'),
        section2 = $('<div id="4">Sub Section 2</div>'),
        subsection2 = $('<div id="5">Content within subsection 2</div>');

    subsection1.appendTo(section1);
    section1.appendTo(parent_container);
    subsection2.appendTo(section2);
    section2.appendTo(parent_container);
    parent_container.appendTo("#somecontainer");
});

http://jsfiddle.net/tzp0fq2q/1/

Источник

Вместо этого есть способ добавить ваш элемент DOM в ваш контейнер, как показано в этом примере

here I have just measured length of elements inside of Container & appending new DOM element based on its length/index
Источник

Может быть, стоит написать небольшую функцию, специфичную для вашей задачи: "обернуть х количество div с данными идентификаторами в другой div"

Ваш звонок будет выглядеть примерно так:

$makeElement(parentId,[id1,id2,id3]);

Ваша функция может быть:

$makeElement(pid,arr){
   var i=1,
        $p=$(pid);
    for(i; i<arr.length;i++){
        $p.append($(arr [i]));
    }
    return $p;
}

Затем вы можете использовать это так:

$('body')
    .append($makeElement('mybox','p1','p2'))
    .find('#p1')
    .append($makeElement('subbox','s1'));
Источник

Использование

$("#some_id").appendTo("#somecontainer");

читать документацию

DEMO

Обновленная демоверсия

Источник
Другие вопросы по тегам