Quiero agregar un elemento de párrafo después de un elemento de clase div específico.
Quiero agregar un elemento p dentro de la segunda clase div de text . Probé una solución pero no funciona.
Mi solución no funciona. ¿Cómo puedo insertar este elemento p en la segunda clase div de texto usando jquery?
$(".text:nth-child(2)").append("<p>Five</p>"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="text"> <p>First</p> </div> <div class="text"> <p>Second</p> </div> <div class="text"> <p>Third</p> </div> <div class="text"> <p>Fourth</p> </div>enésimo de tipo esto parece funcionar mejor
$(".text:nth-of-type(2)").append("<p>Five</p>"); .text { border: 1px solid black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="text"> <p>First</p> </div> <div class="text"> <p>Second</p> </div> <div class="text"> <p>Third</p> </div> <div class="text"> <p>Fourth</p> </div>Puedes usar .eq(n)
$(".text").eq(1).append("<p>Five</p>"); .text { padding: 5px; margin-bottom: 10px; background: #f0f0f0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="text"> <p>First</p> </div> <div class="text"> <p>Second</p> </div> <div class="text"> <p>Third</p> </div> <div class="text"> <p>Fourth</p> </div>En caso de que no necesite necesariamente jQuery, también puede usar Vanilla JS.
var el = [...document.getElementsByClassName("text")][1]; var p = document.createElement("p"); var t = document.createTextNode("Five"); el.appendChild(p.appendChild(t)); <div class="text"> <p>First</p> </div> <div class="text"> <p>Second</p> </div> <div class="text"> <p>Third</p> </div> <div class="text"> <p>Fourth</p> </div> </div>