2

Quiero insertar una etiqueta li dentro de todos los ul que tengan la clase o id 'padre'. Y que termine algo asi:

<ul id='padre'>
  <li id='hijo'></li>
  <li id='hijo'></li>
</ul>

<ul id='padre'>
  <li id='hijo'></li>
  <li id='hijo'></li>
  <li id='hijo'></li>
</ul>

<ul id='padre'>
  <li id='hijo'></li>
  <li id='hijo'></li>
  <li id='hijo'></li>
</ul>

El codigo que estoy utilizando es este

$(document).ready(function () {
  $('#padre').after('<li>NIVEL 3</li>');
});

Pero solo le agrega ese li al primer ul que tiene el id 'padre'

5
  • Hola Lila. Y qué has intentado o qué has investigado? qué problemas concretos has tenido? Nosotros ayudamos a resolver tus errores, no tareas.Mira Cómo preguntar y ejemplo mínimo verificable para más info. Pulsa en editar para explicar mejor el antes y el despues de tu programa. Un saludo
    – lois6b
    Commented el 31 oct. 2018 a las 16:01
  • Con Jquery es sencillisimo. Echale un vistazo.
    – JDev
    Commented el 31 oct. 2018 a las 16:03
  • Dale, ahora lo edito
    – JiMel
    Commented el 31 oct. 2018 a las 16:04
  • 2
    ten en cuenta que el id está pensado para ser unico. por eso solo te añadirá detras del primero que encuetnre con ese id.
    – lois6b
    Commented el 31 oct. 2018 a las 16:09
  • 1
    bueno ya hay una respuesta solo quería hacer una observación por si acaso. nunca repitas los ID Commented el 31 oct. 2018 a las 16:47

1 respuesta 1

3

Usa JQuery, es sencillo usando el append, puedes usar una clase padre para que funcione en todos:

	
$(".padre").append("<li>Test hijo</li>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='padre'>
  <li id='hijo'>1</li>
  <li id='hijo'>1</li>
</ul>

<ul class='padre'>
  <li id='hijo'>1</li>
  <li id='hijo'>1</li>
  <li id='hijo'>1</li>
</ul>

<ul class='padre'>
  <li id='hijo'>1</li>
  <li id='hijo'>1</li>
  <li id='hijo'>1</li>
</ul>

La función del append consiste en insertar el contenido especificado al final de cada elemento en el conjunto de elementos coincidentes (en este caso a aquellos que contengan la clase class='padre').

Puedes acceder a la siguiente ruta: http://api.jquery.com/append/ , te explica más a detalle en lo que consiste el append. Espero te ayude.

2
  • 1
    estaría bueno explicar que hace $(Selector).append() y dejar una referencia a la documentación. Saludos!
    – Fran Islas
    Commented el 31 oct. 2018 a las 16:11
  • Listo @FranIslas, tienes razón, es bueno dejar referencia para que ayude a comprender lo que se hizo. Saludos. Commented el 31 oct. 2018 a las 16:16

Tu Respuesta

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

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