ejemplo - jquery create div

¿Cómo agregar<li> en un<ul> existente?

Question

Tengo un código que se ve así:

<div id="header">
<ul class="tabs">
<li><a href="/user/view"><span class="tab">Profile</span></a></li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
</ul>
</div>

Me gustaría usar jQuery para agregar lo siguiente a la lista:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

Intenté esto:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

Pero eso agrega el nuevo li dentro del último li (justo antes de la etiqueta de cierre), no después de él. ¿Cuál es la mejor manera de agregar este li ?

Answer 1

¿Qué hay de usar "después" en lugar de "añadir".

$("#content ul li:last").after(''<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'');

".after ()" puede insertar contenido, especificado por el parámetro, después de cada elemento en el conjunto de elementos coincidentes.

Answer 2

Debe adjuntar al contenedor, no el último elemento:

$("#content ul").append(''<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'');

La función append () probablemente debería haber sido llamada add () en jQuery porque a veces confunde a las personas. Usted pensaría que agrega algo después del elemento dado, mientras que en realidad lo agrega al elemento.

Answer 3

En lugar de

$("#header ul li:last")

tratar

$("#header ul")

Answer 4

Esta es la forma más corta en que puedes hacer eso.

list.push($(''<li>'', {text: blocks[i] }));
$(''ul'').append(list);

Donde bloques en una matriz. y necesitas recorrer el array.

Answer 5

Esta es otra

$("#header ul li").last().html(''<li> Menu 5 </li>'');

Answer 6

Esto lo haría:

$("#header ul").append(''<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'');

Dos cosas:

• Simplemente puede agregar el <li> al <ul> mismo.
• Necesita usar el tipo de citas opuestas a las que usa en su HTML. Entonces, ya que estás usando comillas dobles en tus atributos, rodea el código con comillas simples.

Answer 7

Puede hacerlo también de forma más ''objetiva'' y aún así fácil de leer:

$(''#content ul'').append(
$(''<li>'').append(
$(''<a>'').attr(''href'',''/user/messages'').append(
$(''<span>'').attr(''class'', ''tab'').append("Message center")
)));

No tienes que pelear con citas entonces, pero debes mantener un rastro de llaves :)

Answer 8

Si simplemente está agregando texto en ese li , puede usar:

 $("#ul").append($("<li>").text("Some Text."));

Answer 9

jQuery viene con las siguientes opciones que podrían satisfacer su necesidad en este caso:

append se utiliza para agregar un elemento al final del div padre que se especifica en el selector:

$(''ul.tabs'').append(''<li>An element</li>'');

prepend se utiliza para agregar un elemento en la parte superior / inicio del div padre especificado en el selector:

$(''ul.tabs'').prepend(''<li>An element</li>'');

insertAfter permite insertar un elemento de su selección después de un elemento que especifique. Su elemento creado se colocará en el DOM después de la etiqueta de cierre del selector especificada:

$(''<li>An element</li>'').insertAfter(''ul.tabs>li:last'');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore hará lo contrario de lo anterior:

$(''<li>An element</li>'').insertBefore(''ul.tabs>li:last'');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

Answer 10

fácil

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );

Answer 11

$("#content ul").append(''<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'');

Answer 12

$("#content ul").append(''<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>'');

Aquí hay algunos comentarios con respecto a la legibilidad del código (enchufe descarado para un blog). http://coderob.wordpress.com/2012/02/02/code-readability

Considere separar la declaración de sus nuevos elementos de la acción de agregarlos a su UL. Se vería algo como esto:

var tabSpan = $(''<span/>'', {
html: ''Message Center''
});
var messageCenterAnchor = $(''<a/>'', {
href=''/user/messages'',
html: tabSpan
});
var newListItem = $(''<li/>'', {
html: messageCenterAnchor,
"id": "myIDGoesHere"
}); // NOTE: you have to put quotes around "id" for IE..
$("content ul").append(newListItem);

Feliz codificacion :)