Создание новых элементов

Веб-программирование --- jQuery --- Создание новых элементов

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

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

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

Создание элементов с использованием функции $()

Одним из способов создания элементов является передача строки, содержащей HTML-фрагмент, функции $(), которая выполнит синтаксический анализ строки и создаст соответствующие DOM-объекты. Пример того, как это можно сделать, приведен в примере ниже:

$(function() {
	
    var newElems = $('<div class="dcell"><img src="http://professorweb.ru/downloads/jquery/lily.png"/></div>');
    
    newElems.each(function (index, elem) {
        console.log("Новый элемент: " + elem.tagName + " " + elem.className);
    });
    
    newElems.children().each(function(index, elem) {
        console.log("Дочерний элемент: " + elem.tagName + " " + elem.src);
    });
	
});

В этом примере на основе одного HTML-фрагмента создаются два элемента: div и img. Поскольку мы работаем здесь с HTML-кодом, можно использовать фрагменты, содержащие DOM-структуру. В данном случае у элемента div имеется дочерний элемент img.

Объект jQuery, возвращаемый функцией $(), содержит лишь элементы верхнего уровня, указанные в HTML-фрагменте. Чтобы продемонстрировать это, в сценарии с помощью функции each() реализован вывод на консоль информации о каждом из элементов, содержащихся в объекте jQuery. Однако дочерние элементы не отбрасываются. К ним можно получить доступ, используя обычные методы, предназначенные для перемещения по структуре DOM-дерева. С этой целью в сценарии вызывается метод children(), и информация о каждом дочернем элементе также выводится на консоль. Результаты работы сценария, выводимые на консоль, выглядят следующим образом:

Создание новых элементов путем клонирования существующих

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

$(function() {
	
    var newElems = $('div.dcell').clone();
    
        
    newElems.each(function (index, elem) {
        console.log("Новый элемент: " + elem.tagName + " " + elem.className);
    });
    
    newElems.children('img').each(function(index, elem) {
        console.log("Дочерний элемент: " + elem.tagName + " " + elem.src);
    });
	
});

В этом сценарии выбираются и клонируются все элементы div, принадлежащие классу dcell. Для демонстрации того, что при этом клонируются также элементы-потомки, в сценарии вызывается метод children() с селектором, обеспечивающим получение клонированных элементов img. Информация об элементах div и img выводится на консоль. Результаты работы сценария выглядят следующим образом:

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

Создание элементов средствами DOM API

Для создания объектов HTMLElement можно использовать непосредственно программный интерфейс DOM, что, собственно говоря, jQuery и делает вместо вас, когда вы привлекаете для этой цели другие методики. Я не собираюсь подробно описывать DOM API и ограничусь приведением простого примера, представленного ниже, который даст вам возможность почувствовать, что именно представляет собой эта методика:

$(function() {
	
    var divElem = document.createElement("div");
    divElem.classList.add("dcell");
    
    var imgElem = document.createElement("img");
    imgElem.src = "http://professorweb.ru/downloads/jquery/lily.png";
    
    divElem.appendChild(imgElem);
    
    var newElems = $(divElem);    
        
    newElems.each(function (index, elem) {
        console.log("Новый элемент: " + elem.tagName + " " + elem.className);
    });
    
    newElems.children('img').each(function(index, elem) {
        console.log("Дочерний элемент: " + elem.tagName + " " + elem.src);
    });
	
});

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