Метод createElement - создание элемента на JavaScript
Метод createElement позволяет создать
новый элемент, передав в параметре имя тега.
После создания с элементом можно работать
как с обычным элементом, а также его можно
добавить на страницу методами prepend,
append,
appendChild,
insertBefore
или insertAdjacentElement.
Если записать результат работы createElement
в переменную, то в этой переменной будет
такой элемент, как будто бы мы получили его
через querySelector
или getElementById.
Единственное отличие - наш элемент не будет
размещен на странице. А так мы можем менять
ему innerHTML, атрибуты, навешивать обработчики
событий и в конце концов разместить его на
странице.
Синтаксис
document.createElement('имя тега');
Пример
Давайте создадим абзац, установим ему текст
и поместим на страницу в конец блока #parent:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.appendChild(p);
Результат выполнения кода:
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>!</p>
</div>
Пример
Дан ul.
Давайте разместим в нем 9 тегов li,
при этом их текстом сделаем порядковые номера:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
parent.appendChild(li);
}
Результат выполнения кода:
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
Пример
Давайте при вставке элементов будем привязывать к ним обработчики событий:
<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.textContent = i;
li.addEventListener('click', function() {
alert(this.textContent);
});
parent.appendChild(li);
};
:
Смотрите также
-
метод
cloneNode,
с помощью которого можно клонировать элемент -
метод
createTextNode,
с помощью которого можно создать новый текстовый узел