var data = "Mike, Henry, Pete"; data = data.replaceAll(" ", ""); var data_array = data.split(','); var newArr = data_array.map(x => 'Name: ' + x); var item = newArr[Math.floor(Math.random()*newArr.length)]; var heading = document.createElement('h1'); heading.textContent = item; document.body.appendChild(heading);El h1 aparece debajo de los otros divs en la página (aparece en la parte inferior de la página) ¿Cómo hago para que aparezca en la parte superior, justo debajo de la etiqueta del cuerpo de apertura con javascript?
Solución 1
Puede intentar usar Node.insertBefore() .
Prueba algo como esto:
var heading = document.createElement('h1'); heading.textContent = item; document.body.insertBefore(heading, document.body.childNodes[0]); // This here... Aquí, básicamente estás insertando un elemento de heading antes del primer childNode de <body> . Esto puede arrojar, debe asegurarse de que <body> tenga hijos para que document.body.childNodes no esté indefinido, o simplemente puede usar document.body.firstChild en lugar de document.body.childNodes[0] .
Puede leer más sobre Node.insertBefore()
Aquí hay un ejemplo:
function insertHeading(){ var heading = document.createElement('h1'); heading.textContent = "I am the Missing Heading."; document.body.insertBefore(heading, document.body.firstChild); } <body> <p>I am a paragrapth that belongs to an article. But my heading is missing.</p> <p>I am a sister paragraph that belongs to a missing header.</p> <button onClick="insertHeading()">Insert heading</button> </body>Solución 2
Usa Element.prepend() :
El método Element.prepend() inserta un conjunto de objetos Node u objetos de cadena antes del primer hijo del elemento.
En este caso document.body es su Element . Simplemente puede agregar el heading como este document.body.prepend(heading) .
Puedes leer más sobre .prepend() . Pero esta solución carece de compatibilidad con el navegador. No está disponible en IE en absoluto.