JavaScript | Как создать div после h1?

Есть HTML-разметка:

<body>
   <h1>Как создать div после h1?</h1>
</body>

Внутри <body> лежит только элемент <h1>.

В body только h1 - HTML — В body только h1 — HTML

Как силами JavaScript добавить элемент <div> в документ, чтобы он стоял сразу после <h1>?

Шаг № 1 — Получение элемента h1

Предположим, что у нас «правильный» сайт и заголовок H1 встречается на странице всего 1 раз. Создадим переменную elh1, в которой будем хранить наш заголовок H1. Получим этот элемент <h1>:

var elh1 = document.getElementsByTagName("h1")[0]

Получили HTML-элемент h1 - JavaScript — Получили HTML-элемент h1 — JavaScript

Шаг № 2 — Создание нового элемента div

Создадим «несуществующий» элемент <div> и положим его в переменную eldiv.

var eldiv = document.createElement("div")

Мы просто создали элемент, который является объектом JavaScript и лежит в оперативной памяти, которую занимает вкладка браузера. То есть пока, что этого элемента нет в документе. Его ещё нужно поместить — отобразить.

Создали HTML-элемент div - JavaScript — Создали HTML-элемент div — JavaScript

Шаг № 3 — Добавление элемента div после h1

Теперь мы можем воспользоваться методом after() и поместить наш созданный DIV после H1

elh1.after(eldiv)

DIV после H1 - JavaScript — DIV после H1 — JavaScript

Информационные ссылки

DOM | Интерфейс ChildNode

Стандарт DOM — Раздел «Mixin ChildNode» — https://dom.spec.whatwg.org/#interface-childnode