Для создания новых элементов разметки 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.