Foro de elhacker.net

Cuando uso .prepend(); para agregar un fragmento de HTML lo que pasa es que me modifica las posiciones del elemento.

Es decir:

HTML

<div id="elementos"></div>
 

javascript/JQUERY

$('#elementos').prepend('<div class="elemento">ELEMENTO 1</div>'); // esperaría que esto tuviera la posición 0
 
$('#elementos').prepend('<div class="elemento">ELEMENTO 2</div>'); // esperaría que esto tuviera la posición 1
 
$('#elementos').prepend('<div class="elemento">ELEMENTO 3</div>'); // esperaría que esto tuviera la posición 2
 

Pero si accedo a los elementos ocurre que va desde el 0 hasta el 2 y no desde el 2 hasta el 0, entonces no hay manera de evitar que vaya agregando estas posiciones de menor a mayor y sí de mayor a menor?

document.querySelectorAll('.elemento')[0].style.opacity = 0.5; // esperaría que modifique al ELEMENTO 1 pero modificará al ELEMENTO 3
 

estás usando la función equivocada, prepend es "pre append" es decir insertar antes, esto lo que hace es que cada ver que insertas algo, lo inserta en la cabeza en lugar de la cola, ej.:


tu buscas es la función append que es simplemente "insertar" y por defecto inserta al final, ej.:



 ;D me parece curioso que te hayas en programación dado primero con prepend que append, más bien usualmente la duda es "como uso append para agregar al inicio?"

Lo más sencillo sería que solo cambiarás el orden de las instrucciones pero puedes agregar todos los elementos en una sola instrucción:

$('#elementos').prepend([
    '<div class="elemento">ELEMENTO 1</div>',
    '<div class="elemento">ELEMENTO 2</div>',
    '<div class="elemento">ELEMENTO 3</div>'
]);

Si #elementos está vacio también puedes usar .append.

Ya lo solucioné!

xD (( necesitaba usar prepend y no append por un tema de como se ve visualmente, quiero que inicie arriba pero no quería que me "rompiera" las posiciones que estaba usando.

Lo conseguí con esta formula por si las dudas a alguien le sirva:

let Q = document.querySelectorAll('.elemento').length;
let X = 1; // posición que se quiere usar
X = Q - X - 1;
 

Gracias!

claro tu problema es que querías que organize visualmente de una manera y en JS inversa, tambien pudiste invertirlo con una regla de css ya que el es quien se encarga de lo visual

ejemplo

También esa es buena!
No la conocía.