Как вставить элементBefore () в тег body?

Question

Я пытаюсь использовать insertBefore в js следующим образом:

var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, null);

var p = document.createElement("p");
p.innerHTML = "test2";
document.body.insertBefore(p, null);

Но это добавило бы последний элемент p непосредственно перед закрытием тега body, как я могу использовать его, чтобы он был добавлен в начало при открытии? Таким образом, последний добавленный элемент будет первым элементом внутри тега body.

Я пытался:

document.body.insertBefore(p, document.getElementsByTagName('body')[0]);

Но Firebug показывает:

Узел не найден "код:" 8

Answer 1

Вы можете получить первого дочернего элемента body со свойством firstChild.Тогда используйте это как ссылку.

const p = document.createElement("p");
p.textContent = "test1";
document.body.insertBefore(p, document.body.firstChild);

Я модернизировал ваш код по причинам:)

Answer 2

document.body.prepend(p);

Это новое дополнение в (вероятно) ES7.Это ванильный JS и более читабелен, чем предыдущие варианты.В настоящее время он доступен в 83% браузеров , включая Chrome, FF и Opera.

Вы можете напрямую добавлять строки вперед, хотя они не будут тегами 'p'

document.body.prepend('This text!');

Ссылки: developer.mozilla.org - Полифилл

Answer 3

Вы должны вставить перед чем-то.document.getElementsByTagName('body')[0] - это элемент body (синтаксис немного хитрый, чтобы получить элемент body во всех браузерах) ¹ ,Если вы хотите вставить в тело, вы хотите вставить перед первым элементом этого.Это может выглядеть так:

var body   = document.body || document.getElementsByTagName('body')[0],
    newpar = document.createElement('p');
newpar.innerHTML = 'Man, someone just created me!';
body.insertBefore(newpar,body.childNodes[0]);

¹ в некоторых браузерах это document.body, в других document.documentElement и т. Д., Но во всех браузерахтэг body