тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

Сейчас мы с вами научимся создавать новые DOM элементы через JavaScript, а затем добавлять их на страницу. Для этого предназначен метод createElement. Параметром этого метода следует передавать имя тега, который должен быть создан.

Если записать результат работы createElement в переменную, то в этой переменной будет такой элемент, как будто бы мы получили его через querySelector.

Единственное отличие - наш элемент не будет размещен на странице. А так мы можем менять ему innerHTML, атрибуты, навешивать обработчики событий и в конце концов разместить его на странице.

Для размещения нового элемента на странице применяется метод appendChild. Этот метод следует применять к тому элементу, в который мы хотим поместить наш элемент. А параметром метода следует передавать наш новый элемент, созданный ранее через createElement.

Посмотрим на практическом примере. Пусть у нас есть див, а в нем - несколько абзацев:

<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div>

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #parent:

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>

Дан ol:

<ol id="elem"></ol>

Вставьте ему в конец li с текстом 'пункт'.

Дан ol и кнопка:

<ol id="elem"></ol> <button id="button">click me</button>

Сделайте так, чтобы по клику на кнопку в конец списка добавлялся li с текстом 'пункт'.