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

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