Для создания новых элементов разметки html можно использовать функцию jQuery, передав ей в качестве параметра код добавляемой разметки:
var newList=$('<ul><li>Item1</li><li>Item2</li></ul>');
console.log(newList.html());
Здесь мы просто создаем новый элемент, при этом он пока еще не добавляется в html-разметку веб-страницы.
Альтернативным способом создания новых элементов представляет метод clone. Данный метод просто клонирует разметку уже существующего элемента:
var newList=$('ul').first().clone();
console.log(newList.html());
Само создание элементов было бы бесполезным, если бы мы не могли бы их добавить в структуру веб-страницы. Для добавления jQuery предоставляет пару методов append/prepend.
Метод append добавляет элемент в конец элемента выборки. Он имеет следующие варианты использования:
append('разметка html'): вставляет указанную в параметре разметку html в конец элемента выборки
append(элемент): вставка элемента в конец элемента выборки
append(jQuery): вставка объекта jQuery в конец элемента выборки
append(функция): в конец элемента выборки вставляется строка с разметкой html, элемент html или объект jQuery, которые возвращаются функцией
Например, у нас есть следующий список:
<ul id="langs"> <li>Java</li> <li>C/C++</li> <li>PHP</li> </ul>
Применим метод append:
// вставка строки кода
$('#langs').append('<li>C#</li>');
// вставка элемента
var jsItem = document.createElement('li');
jsItem.innerHTML='JavaScript';
$('#langs').append(jsItem);
//вставка объекта jQuery
var vbItem = $('<li>Visual Basic</li>');
$('#langs').append(vbItem);
В результате итоговый список будет выглядеть следующим образом:
<ul id="langs"> <li>Java</li> <li>C/C++</li> <li>PHP</li> <li>C#</li> <li>JavaScript</li> <li>Visual Basic</li> </ul>
Использование функции:
$('ul#langs').append(function(index,html){
return $('<li>JavaScript</li>');
});
Функция вызывается для каждого элемента выборки и принимает два аргумента: index - индекс текущего перебираемого элемента выборки и
html - разметка текущего элемента выборки. На выходе в данном случае возвращается объект jQuery, хотя также мы можем вернуть и просто строку с разметкой и
элемент html.
Метод prepend похож на метод append, только добавляет новый элемент в начало элемента выборки. Он имеет следующие варианты использования:
prepend('разметка html'): вставляет указанную в параметре разметку html в начало элемента выборки
prepend(элемент): вставка элемента в начало элемента выборки
prepend(jQuery): вставка объекта jQuery в начало элемента выборки
prepend(функция): в начало элемента выборки вставляется строка с разметкой html, элемент html или объект jQuery, которые возвращаются функцией
Применим метод append:
// вставка строки кода
$('#langs').prepend('<li>C#</li>');
// вставка элемента
var jsItem = document.createElement('li');
jsItem.innerHTML='JavaScript';
$('#langs').prepend(jsItem);
//вставка объекта jQuery
var vbItem = $('<li>Visual Basic</li>');
$('#langs').prepend(vbItem);
Применение функции будет аналогично ее использованию в методе append. А результатом предыдущего кода будет следующая разметка:
В результате итоговый список будет выглядеть следующим образом:
<ul id="langs"> <li>Visual Basic</li> <li>JavaScript</li> <li>C#</li> <li>Java</li> <li>C/C++</li> <li>PHP</li> </ul>
Методы appendTo и prependTo добавляют объекты в качестве дочерних к элементу, который указан в параметре метода.
Например, выше у нас добавлялись элементы в список. Частично перепишем пример, использовав appendTo и prependTo:
// вставка в объект jQuery
$('<li>C#</li>').prependTo('#langs');
// вставка в элемент html
var list = document.getElementById('langs');
$('<li>JavaScript</li>').appendTo(list);
Итак, методы appendTo и prependTo в качестве параметров могут принимать либо объект jQuery, либо элемент html.
В первом случае сначала мы создаем объект jQuery из разметки ($('<li>C#</li>')) и затем добавляем его в начало элемента,
у которого id=langs.
Во втором случае, мы получаем элемент списка с помощью метода JavaScript и затем в конец этого элемента добавляем разметку html с помощью метода appendTo.