Вставка дочерних, сестринских и родительских элементов

Веб-программирование --- jQuery --- Вставка дочерних, сестринских и родительских элементов

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Вставка дочерних элементов и элементов-потомков

После того как вы познакомились с методами создания элементов, можно приступить к рассмотрению способов их вставки в документ. Сначала речь пойдет о методах, позволяющих вставлять одни элементы внутрь других и тем самым создавать новые дочерние элементы и другие элементы-потомки. Краткое описание этой группы методов приведено в таблице ниже:

Для вставки дочерних элементов можно использовать также метод wrapInner(), рассматриваемый далее. Этот метод помещает новый дочерний элемент между элементом и его существующими дочерними элементами.

Элементы, которые передаются перечисленным выше методам в виде аргументов, вставляются в качестве дочерних элементов в каждый выбранный элемент, содержащийся в объекте jQuery. В связи с этим очень важно использовать методики, предназначенные для управления наборами выбранных элементов, таким образом, чтобы такие наборы включали лишь те элементы, с которыми вы действительно хотите работать.

Пример использования метода append() приведен ниже:

$(function() {
	
    var newElems = $("<div class='dcell'></div>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилии:</label>")
        .append("<input name='lily' value='0' required />");
    
    newElems.css("border", "thick solid red");
    
    $('#row1').append(newElems); 
	
});

В этом сценарии метод append() используется двояким образом: сначала — для построения нужного набора новых элементов, а затем — для вставки этих элементов в HTML-документ. Поскольку метод append() — первый из рассматриваемых нами методов, предназначенных для выполнения DOM-манипуляций, я затрачу немного времени на то, чтобы продемонстрировать некоторые особенности его поведения, знание которых позволяет избежать большинства распространенных ошибок, связанных с использованием jQuery для работы с DOM. Однако сначала взгляните на результаты работы данного сценария, представленные на рисунке:

Первое, на что следует обратить внимание, — это способ, используемый для построения новых элементов с помощью метода append():

    var newElems = $("<div class='dcell'></div>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилии:</label>")
        .append("<input name='lily' value='0' required />");

Вообще говоря, можно было бы сразу создать один цельный крупный блок HTML-кода, содержащий все необходимые элементы, но мне хотелось прояснить один из ключевых аспектов методов, манипулирующих элементами DOM. Он заключается в том, что объекты jQuery, возвращаемые этими методами, содержат те же элементы, что и объект, вызвавший метод.

Так, в данном сценарии отправной точкой служит объект jQuery, содержащий элемент div, а результатом работы каждого из вызываемых методов append() также является объект jQuery(), содержащий тот же элемент div, а не элемент, который добавляется. Это означает, что цепочка вызовов метода append(0) создает для каждого из первоначально выбранных элементов не вложенную последовательность новых элементов, а ряд новых дочерних элементов.

Следующая особенность, на которую хотелось бы обратить ваше внимание, заключается в том, что jQuery позволяет изменять вновь созданные элементы и перемещаться между ними еще до их присоединения к документу. В данном случае мы хотим выделить новые элементы рамкой, для чего используем следующий вызов:

    newElems.css("border", "thick solid red");

Эта возможность чрезвычайно удобна, поскольку позволяет создавать сложные наборы элементов и в полном объеме выполнять над ними все необходимые подготовительные операции до их вставки в документ.

Наконец, вновь созданные элементы добавляются в документ с помощью следующей строки кода:

    $('#row1').append(newElems); 

Новые элементы добавляются в каждый из элементов выбранного набора. В данном случае выборка состоит всего лишь из одного элемента (имеющего идентификатор row1), добавление которого приводит к появлению на странице изображения лилии.

Вставка содержимого в начало элементов

Дополнением к методу append() служит метод prepend(), с помощью которого можно вставлять новые элементы в качестве дочерних элементов в каждый из элементов, содержащихся в объекте jQuery. Соответствующий пример приведен ниже:

$(function() {
	
    var orchidElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />");
    
    var newElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилия:</label>")
        .append("<input name='lily' value='0' required />").add(orchidElems);
    
    newElems.css("border", "thick solid red");
    
    $('#row1, #row2').prepend(newElems);  
	
});

В данном примере проявляется еще одна важная особенность методов jQuery, предназначенных для выполнения DOM-манипуляций: все элементы, передаваемые в виде аргумента любому из этих методов, добавляются в качестве дочерних элементов во все элементы, содержащиеся в объекте jQuery. В сценарии создаются два элемента div: один — для лилий, второй — для орхидей. Для объединения обоих наборов элементов в одном объекте jQuery используется метод add().

Далее в сценарии создается другой объект jQuery, содержащий элементы со значениями id, равными row1 и row2, а вставку в документ элементов, соответствующих лилиям и орхидеям, обеспечивает вызов метода prepend(). Результат выполнения сценария представлен на рисунке:

Новые элементы выделены рамками красного цвета. Вы видите, что оба элемента, соответствующие лилиям и орхидеям, добавлены в оба элемента row. Вместо того чтобы использовать метод add(), можно воспользоваться передачей сразу нескольких элементов методам, предназначенным для изменения DOM, как показано в примере ниже:

$(function() {
	
    var orchidElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />");
    
    var lilyElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилия:</label>")
        .append("<input name='lily' value='0' required />");
    
    $('#row1, #row2').prepend(lilyElems, orchidElems);  
	
});

Вставка одних и тех же элементов в разные места документа

Один и тот же набор новых элементов может быть вставлен в документ только один раз. После этого любая попытка использования этого набора в качестве аргумента при вызове методов, предназначенных для вставки в DOM новых узлов, приведет не к дублированию этого набора, а к его перемещению. Чтобы понять суть проблемы, обратимся к примеру:

$(function() {
	
    var orchidElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />");
    
    var newElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилия:</label>")
        .append("<input name='lily' value='0' required />").add(orchidElems);
    
    newElems.css("border", "thick solid red");
    
    $('#row1').append(newElems);
    $('#row2').prepend(newElems); 
	
});

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

Действительно, элементы вставляются в окончание элемента row1, но вызов метода prepend() приводит не к их повторной вставке, а к перемещению. Для решения этой проблемы следует создать копии элементов, подлежащих вставке, с помощью метода clone(). Пересмотренный вариант сценария приведен ниже:

...
   
    $('#row1').append(newElems);
    $('#row2').prepend(newElems.clone());

Теперь в результате их копирования элементы вставляются в оба места в документе:

Вставка элементов из объекта jQuery

В случае использования методов appendTo() и prependTo() все меняется местами: элементы, содержащиеся в объекте jQuery, вставляются в качестве дочерних элементов внутрь элементов, заданных аргументом. Соответствующий пример приведен ниже:

$(function() {
	
    var newElems = $("<div class='dcell'/>");
             
    $('img').appendTo(newElems);         
             
    $('#row1').append(newElems);
	
});

В этом сценарии мы создаем объекты jQuery, которые содержат новые элементы div и img, подлежащие вставке в документ. Затем элементы img вставляются в элемент div в качестве его дочерних элементов с помощью метода appendTo(). Конечный результат показан на рисунке:

Как нетрудно заметить, выполнение сценария приводит к тому, что все элементы img перемещаются в новый элемент div, который был добавлен в элемент row1.

Вставка элементов с использованием функции

Методы append() и prepend() могут принимать в качестве аргумента также функцию. Это обеспечивает возможность динамической вставки дочерних элементов в каждый из элементов, выбранных объектом jQuery, как показано ниже:

$(function() {
	
    var orchidElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />");
    
    var lilyElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилия:</label>")
        .append("<input name='lily' value='0' required />");
    
    $(orchidElems).add(lilyElems).css("border", "thick solid red");
    
    $('div.drow').append(function(index, html) {
        if (this.id == "row1") {
            return orchidElems;
        } else {
            return lilyElems;
        }
    });  
	
});

Функция вызывается однократно для каждого из элементов, содержащихся в объекте jQuery. Аргументами функции являются индекс элемента в выбранном наборе и строка, содержащая HTML-код обрабатываемого элемента. Переменная this ссылается на текущий элемент набора. Возвращаемый функцией результат вставляется в конце или в начале обрабатываемого элемента. Функция может возвращать HTML-строку, один или несколько объектов HTMLElement или объект jQuery.

В этом примере сначала создаются необходимые HTML-фрагменты для лилий и орхидей, после чего функция, передаваемая методу append() в качестве аргумента, возвращает нужный фрагмент, исходя из значения свойства id. Результаты работы сценария показаны на рисунке:

Вставка родительских элементов и элементов-предков

Библиотека jQuery предоставляет набор методов, обеспечивающих вставку элементов в документ как родительских или элементов-предков по отношению к существующим элементам. Такого рода операции называются обертыванием (wrapping), или внешней вставкой, (поскольку добавляемый элемент окружает собой уже существующие элементы). Краткое описание этой группы методов приведено в таблице ниже:

При обертывании элементов эти методы могут принимать HTML-фрагмент в качестве аргумента, но всегда следует проверять, чтобы этот фрагмент содержал только один внутренний элемент. В противном случае jQuery не сможет определить, что именно необходимо сделать. Отсюда следует, что каждый элемент в аргументе метода может иметь не более одного родительского и не более одного дочернего элемента.

Пример использования метода wrap() приведен ниже:

$(function() {
	
    var newElem = $("<div/>").css("border", "thick solid red");
    $('div.drow').wrap(newElem); 
	
});

В этом сценарии мы создаем новый элемент div и используем метод css() для установки значения CSS-свойства border. Затем элемент div добавляется в качестве родительского элемента по отношению ко всем элементам div с классом drow в документе. Результаты выполнения сценария представлены на рисунке:

Элементы, которые вы передаете в виде аргумента методу wrap(), вставляются между каждым из элементов, содержащихся в объекте jQuery, и его текущим родительским элементом.

Обертывание набора элементов

Когда используется метод wrap(), новые элементы клонируются, и каждый из элементов, содержащихся в объекте jQuery, получает собственный новый родительский элемент. Чтобы вставить в документ элемент, который станет родительским сразу для нескольких элементов, следует использовать метод wrapAll(), как показано ниже:

$(function() {
	
    var newElem = $("<div/>").css("border", "thick solid red");
    $('div.drow').wrapAll(newElem); 
	
});

Этот сценарий отличается от предыдущего лишь тем, что в нем используется метод wrapAll(). Страница в окне браузера показана на рисунке:

Новый элемент добавляется как общий родительский элемент для всего набора выбранных элементов.

Будьте внимательны, используя этот метод. Если выбранные элементы не имеют общих родителей, то новый элемент будет добавлен как родительский для первого из них. После этого jQuery переместит все остальные элементы так, чтобы они стали сестринскими по отношению к первому элементу:

$(function() {
	
    var newElem = $("
").css("border", "thick solid red");
    $('img').wrapAll(newElem);
	
});

В этом сценарии выбираются элементы img, и эти элементы не имеют общих родителей. Вид страницы в окне браузера представлен на рисунке:

Новый элемент div был добавлен в документ как родительский по отношению к элементу img, соответствующему изображению астры, тогда как все остальные элементы изображений были перемещены в структуре DOM в позиции сестринских по отношению к нему элементов.

Обертывание содержимого элементов

Метод wrapInner() позволяет окружать элементами содержимое других элементов (а не сами элементы). Соответствующий пример приведен ниже:

$(function() {
	
    var newElem = $("
").css("border", "thick solid red");
    $('.dcell').wrapInner(newElem);
	
});

Метод wrapInner() вставляет новые элементы между каждым из содержащихся в объекте jQuery элементом и его дочерним элементом. В данном сценарии выбираются элементы, принадлежащие классу dcell, и содержимое каждого из них заключается в новый элемент div. Страница в окне браузера показана на рисунке:

Вставка сестринских элементов

Как вы уже могли догадаться, jQuery предоставляет также набор методов, обеспечивающих вставку элементов в документ как сестринских по отношению к существующим элементам. Краткое описание этой группы методов приведено в таблице ниже:

Вызовы методов before() и after() следуют тем же шаблонам, что и другие методы вставки элементов в документ, с которыми вы уже познакомились. Пример использования обоих методов приведен ниже:

$(function() {
	
    var orchidElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
        .append("<label for='orchid'>Орхидея:</label>")
        .append("<input name='orchid' value='0' required />");
    
    var lilyElems = $("<div class='dcell'/>")
        .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
        .append("<label for='lily'>Лилия:</label>")
        .append("<input name='lily' value='0' required />");
        
    $(orchidElems).add(lilyElems).css("border", "thick solid red");    
        
    $('#row1 div.dcell').after(orchidElems);
    $('#row2 div.dcell').before(lilyElems);
	
});

В этом сценарии мы создаем наборы элементов для орхидей и лилий, а затем вставляем их в документ с помощью методов before() и after() как сестринские элементы по отношению к каждому из элементов, принадлежащих классу dcell. Элементы, соответствующие орхидеям, вставляются как следующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row1, тогда как элементы, соответствующие лилиям, вставляются как предшествующие сестринские элементы по отношению к каждому элементу в контейнере со значением id, равным row2.

Вид страницы в окне браузера представлен на рисунке:

Вставка сестринских элементов из объекта jQuery

Методы insertAfter() и insertBefore() вставляют элементы, содержащиеся в объекте jQuery, в качестве следующих или предшествующих сестринских элементов по отношению к элементам, переданным методу в качестве аргумента. Это та же функциональность, которую обеспечивают методы after() и before(), но отличающаяся тем, что объект jQuery и аргумент метода меняются ролями.

Пример использования обоих методов приведен ниже:

... 
   
    orchidElems.insertAfter('#row1 div.dcell');
    lilyElems.insertBefore('#row2 div.dcell');   

Вставка сестринских элементов с использованием функции

Сестринские элементы можно вставлять динамически, передавая методам after() и before() функцию в качестве аргумента. Пример динамической генерации сестринских элементов приведен ниже:

$(function() {
	
    $('#row1 div.dcell').after(function(index, html) {
        if (index == 0) {
            return $("<div class='dcell'/>")
                .append("<img src='http://professorweb.ru/downloads/jquery/orchid.png'/>")
                .append("<label for='orchid'>Орхидея:</label>")
                .append("<input name='orchid' value='0' required />")
                .css("border", "thick solid red");
        } else if (index == 1) {
            return $("<div class='dcell'/>")
                .append("<img src='http://professorweb.ru/downloads/jquery/lily.png'/>")
                .append("<label for='lily'>Лилия:</label>")
                .append("<input name='lily' value='0' required />")
                .css("border", "thick solid red");
        }
    });  
	
});

В этом сценарии сестринские элементы генерируются для тех элементов, для которых передаваемый функции аргумент index принимает значение 0 или 1. Страница в окне браузера показана на рисунке: