jQuery рецепт: создание и добавление новых элементов (часть 1)

На сегодняшний день, jQuery - это самая популярная JavaScirpt библиотека, решающая кучу проблем. Мы можем без особого труда манипулировать контентом - заменять, вставлять, удалять, создавать анимацию и т.д.

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

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

Метод Append предназначен для создания и вставки нового элемента в уже существующий контекст. Технически, новый элемент вставляется прямо перед закрывающимся тегом родителя.

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

В JavaScript перед тем как добавить какой-то элемент, нам нужно его создать при помощи метода .createElement(). В следующем примере, мы создаем элемент <div> и помещаем его в переменную.

var div = document.createElement('div');

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

var div = document.createElement('div');
document.body.appendChild(div);

Если мы посмотрим на код страницы через Developer Tool, то увидим наш новый элемент сразу перед закрывающимся тегом </body>.

Теперь, давайте сделаем то же самое с помощью jQuery. Тут всё гораздо проще. Всё, что нам нужно, так это воспользоваться методом .append():

$('body').append('<div>');

Выполнив данный код, вы получите точно такой же результат. Новый элемент будет добавлен в тело документа. Только тут, нам это обошлось в одну строчку кода.

Добавление нового элемента с текстом

Давайте пойдём дальше. На этот раз будем вставлять новый элемент, содержащий текст. Как и в предыдущем случае, сначала сделаем это через JavaScript.

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

var p = document.createElement('p'); // создаём параграф

Далее нам нужно создать текст. В JavaScript это возможно при использовании метода .createTextNode(). В следующем примере, мы создаём текс:

var p = document.createElement('p'),
txt = document.createTextNode('This is the text in new element.');

Для того чтобы добавить текст в наш параграф необходимо восользоваться методом .appendChild():

B ещё раз применить .appendChild() для того, чтобы вставить элемент на страницу:

document.body.appendChild(p);

Результат будет такой:

В jQuery и эта задача может быть решена в одну строчку с помощью всё того же метода .append():

$('body').append('<p>This is the text in new element.<p>');

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/HB63Tq6bOxo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

jQuery рецепт: создание и добавление новых элементов (часть 1) | | 2013-06-02 00:21:09 | | Статьи Web-мастеру | | На сегодняшний день, jQuery - это самая популярная JavaScirpt библиотека, решающая кучу проблем. Мы можем без особого труда манипулировать контентом - заменять, вставлять, удалять, создавать анимацию | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: