Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

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

Twitter
Нравится
RedLine

На сегодняшний день, 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

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

Правила добавления комментариев


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

Download SocComments v1.3