Вы здесь: Главная > JavaScript > Создание элементов

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

Опубликовано автором Просмотры: 4

Создание элементов с использованием HTML-тегов ─ не единственный способ сделать это. На самом деле можно создавать, изменять и вставлять элементы из JavaScript.

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

Вот пример, который создаёт div, добавляет к нему некоторый текст и добавляет его в качестве последнего элемента в теле:

var div = document.createElement('div');
div.textContent = "Sup, y'all?";
div.setAttribute('class', 'note');
document.body.appendChild(div);

Так document.createElement используется с HTML-тегом для создания элемента. Затем textContent изменяется, а затем изменяется атрибут class с помощью setAttribute. Это также можно использовать для добавления атрибута данных или любого другого атрибута, как вы можете в HTML! Наконец, элемент добавляется к body с помощью метода appendChild.

По сути, это эквивалентно

<div class="note">Sup, y'all?</div>

Фактически, у всех элементов есть appendChild метод, поэтому, выполнив вышеописанное, можно выполнить следующее:

var span = document.createElement('span');
span.textContent = "Hello!";
div.appendChild(span);

span будет добавлено в конец элемента div.

К сожалению, используемое textContent свойство поддерживается не всеми браузерами. Internet Explorer (sad face) поддерживает только эквивалентное свойство с именем innerText. Другие браузеры также поддерживают innerText, но в интересах веб-стандартов лучше всего посмотреть, какое свойство поддерживает элемент, и использовать это:

var span = document.createElement('span');
if (span.textContent) {
    span.textContent = "Hello!";
} else if (span.innerText) {
    span.innerText = "Hello!";
}

Удаление элемента

Удалять элементы не менее увлекательно. У каждого элемента DOM есть свойство, которое на самом деле является родительским элементом элемента DOM. Чтобы удалить элемент, вы вызываете метод родительского элемента removeChild, передавая дочерний элемент, который вы хотите удалить. Что-то вроде этого:

div.parentNode.removeChild(div);

Просто, да?

Создание с помощью jQuery

Другой альтернативой является использование синтаксиса создания элементов jQuery. Этот пример выполняет то же самое, что и приведённые выше примеры вместе взятые:

var div = $('<div/>').text("Sup, y'all?").appendTo(document.body);
$('<span/>').text('Hello!').appendTo(div);

Страницы в тему:

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