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

Мы научились менять содержимое существующего тега. Но иногда необходимо создавать новый тег целиком. Например, чтобы добавить ранее не существовавшие пункты в список. Это делается в три этапа:

• новый тег создаётся в оперативной памяти компьютера;
• добавляется к уже существующим тегам;
• наполняется содержимым.

Метод createElement (create — порождать) создаёт новый элемент в оперативной памяти компьютера. Пример:
пункт = document.createElement("li")
Аргумент метода — название создаваемого тега. Метод возвращает указатель на вновь созданный тег. Указатель необходимо сохранить в переменной. Созданный элемент существует только в оперативной памяти компьютера и не отображается на странице. Поэтому его теперь необходимо добавить к уже существующим тегам.

Метод appendChild добавляет дочерний элемент. Например, к списку добавляются новый пункт:
<ul id="list">
<li>Первый пункт списка</li>
</ul>
<script type="text/javascript">
var пункт = document.createElement('li');
document.getElementById('list').appendChild(пункт);
пункт.innerHTML = 'Второй пункт'
</script>

	Команда 1
	Команда 2
	Команда 3

Здесь первая команда создаёт в оперативной памяти компьютера новый пункт списка и сохраняет ссылку на него в переменной пункт. Вторая команда обращается к тегу списка и добавляет к нему вновь созданный пункт. Третья команда наполняет внутреннее содержание текстом Второй пункт. На рисунке показана последовательность создания нового пункта списка.

Задание 4

Разместите на странице нумерованный список из одного пункта, например, «Первый элемент». Поставьте кнопку «Добавить», по нажатию на которую добавляется новый пункт списка с текстом «Новый элемент списка».

Задание 5

Напишите скрипт, который по нажатию кнопки создаёт новый пункт списка с нумерацией, например, «Новый элемент 1», «Новый элемент 2» и так далее.