3

He creado una etiqueta h1 y la he insertado al div, pero esta se ubica en la última posición y no en la primera ¿cómo hago para que se ubique en la primera posición?

var agregar = document.querySelector(".list");

function insertar() {
var crear = document.createElement("h1");
crear.innerText = "Información del producto";
agregar.appendChild(crear);
}
insertar();
<div class="list">
<p>Cantidad del producto</p>
<span>200L</span>
</div>

2 respuestas 2

4

Procede de esta forma:

  • Quita el uso del método appenChild
  • Obtén y asigna a una variable el elemento p que ya existe
  • Usa el método insertBefore

El método insertBefore te va a solicitar:

  • Elemento a ingresar (es decir la etiqueta), que en este caso sería la etiqueta del h1que se llama crear
  • Elemento que estará después del que planeas registrar que en este caso es parrafo

Código:

    <div class="list">
    <p>Cantidad del producto</p>
    <span>200L</span>
    </div>
    
    <script>
    var agregar = document.querySelector(".list");
    
    function insertar() {
    var crear = document.createElement("h1");
    let parrafo = document.querySelector("p")
    crear.innerText = "Información del producto";
    agregar.insertBefore(crear, parrafo);
    }
    insertar();
    </script>

Referencia

0

Un método alternativo sería utilizar el método prepend que hace exactamente esto: inserta el nodo creado en la primera posición.

    var agregar = document.querySelector(".list");
    
    function insertar() {
    var crear = document.createElement("h1");
    crear.innerText = "Información del producto";
    agregar.prepend(crear);
    }
    insertar();
<div class="list">
    <p>Cantidad del producto</p>
    <span>200L</span>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.