вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Метод createElement

Метод 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.innerHTML = '!'; 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.innerHTML = 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.innerHTML = i; li.addEventListener('click', function() { alert(this.innerHTML); }); parent.appendChild(li); }

:

Смотрите также

  • метод cloneNode,
    с помощью которого можно клонировать элемент