before - jquery create element

jQuery insertAt

Question

Estoy tratando de insertar un elemento li en un índice específico en un elemento ul usando jQuery. Parece que solo puedo insertar un elemento al final de la lista. Soy muy nuevo en jQuery, así que es posible que no esté pensando correctamente.

Answer 1

Intenta usar este método ... es la forma más sencilla de insertar texto dentro de un elemento.

<div id="test"></div>

$(''#test'').append();

Answer 2

Similar a la respuesta de Dreas, pero ligeramente diferente y posiblemente más eficiente:

$("#thelist li:eq(2)").after("<li>new item</li>");

O de otra manera:

$("<li>new item</li>").insertAfter("#thelist li:eq(2)");

Answer 3

Un plugin jQuery simple ( un pequeño conjunto de pruebas ) que permite agregar un elemento en cualquier índice, incluido 0.

$.fn.insertAt = function(index, $parent) {
    return this.each(function() {
        if (index === 0) {
            $parent.prepend(this);
        } else {
            $parent.children().eq(index - 1).after(this);
        }
    });
}

Suponiendo que tenemos el siguiente HTML:

<ul id="items">
    <li>A</li>
</ul>

Luego insertando un ítem en el índice 0 $(''<li>C</li>'').insertAt(0, $(''#items'')) dará como resultado

<ul id="items">
    <li>C</li>
    <li>A</li>
</ul>

Insertar otro elemento, esta vez en el índice 1 $(''<li>B</li>'').insertAt(1, $(''#items'')) produce

<ul id="items">
    <li>C</li>
    <li>B</li>
    <li>A</li>
</ul>

Descargo de responsabilidad: no hay un manejo de errores de los parámetros de entrada. Si el index es negativo o mayor que la longitud de los hijos o si el index no es un número, el comportamiento es más o menos indefinido. Si $parent no es un objeto jQuery insertAt fallará.

Answer 4

Pruebe algo como esto:

$("#thelist li").eq(3).after("<li>A new item</li>");

Con la función eq , puede obtener un índice específico de los elementos recuperados ... luego, inserte el nuevo elemento de la lista después de él.

En la función anterior, estoy insertando un nuevo elemento en la posición 4 (índice 3).

Más información sobre la función en jQuery Docs