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

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

39
dom getelementsbytagname insert javascript

3 ответов

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

var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, document.body.firstChild);
Insert before this
68
document.body.prepend(p);

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

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

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

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

4

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

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]);

1в некоторых браузерах это document.body, другие document.documentElement etc., но во всех браузерах tagname body

1