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

Я пытаюсь использовать 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 показывает:

Node не найден "code:" 8

Ответ 1

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

document.body.insertBefore(p, document.body.firstChild);

jsFiddle.

Ответ 2

document.body.prepend(p);

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

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

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

Ссылки: developer.mozilla.org - Polyfill

Ответ 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~~