javascript - mostrar - ¿Cómo insertar el elemento Before() en la etiqueta body?

llamar javascript desde html

Question

Estoy tratando de usar insertBefore en js como este:

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

Pero eso agregaría el último elemento p justo antes del cierre de la etiqueta corporal, ¿cómo podría usarlo para que se agregue a la parte superior cuando se abra? Entonces, el último elemento agregado será el primer elemento dentro de la etiqueta de cuerpo.

Lo intenté:

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

Pero firebug muestra:

Nodo no encontrado "código:" 8

Answer 1

Puede obtener el primer hijo del elemento del body con la propiedad firstChild . Luego úselo como referencia.

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

jsFiddle .

Answer 2

Tienes que insertar algo antes. document.getElementsByTagName(''body'')[0] es el elemento body (la sintaxis es un truco para obtener el elemento body en todos los navegadores) ¹ . Si desea insertar en el cuerpo, desea insertar antes del primer elemento del mismo. Eso podría verse así:

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

¹ en algunos navegadores es document.body , other document.documentElement etc., pero en todos los navegadores el nombre de tag es body

Answer 3

document.body.prepend(p);

Esta es una nueva adición en (probable) ES7. Es vanilla JS y es más legible que las opciones anteriores. Actualmente está disponible en el 83% de los navegadores , incluidos Chrome, FF y Opera.

Puede anteponer cadenas directamente, aunque no serán etiquetas ''p''

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

Enlaces: developer.mozilla.org - Polyfill