Tengo 2 divs con el mismo nombre de clase pero cadenas diferentes dentro del div. Quiero usar una inserciónDespués del primer div para mostrar texto adicional, pero el texto se muestra en ambos divs:
<div class='test'>First Div</div> <div class='test'>Second Div</div>Mi acercamiento:
if ( document.getElementsByClassName('test')[0] && document.getElementsByClassName('test')[0].innerHTML == 'First Div' ) { $('<h2>Inserting New Text</h2>').insertAfter('.test')[0]; }Pero esto agrega el texto después de la Primera División y la Segunda División. Quiero saber si hay una forma de insertar solo una vez o insertar después de hacer coincidir la cadena
No hay necesidad de jQuery aquí. Use insertAdjacentHTML para agregar el nuevo elemento.
// Pick up the first element with the test class const el = document.querySelector('.test'); // Use `insertAdjacentHTML` to add the new div after it el.insertAdjacentHTML('afterend', '<div>new text</div>'); <div class="test">First Div</div> <div class="test">Second Div</div>Simplemente manténgalo simple, encuentre todos los elementos con la clase objetivo y elija el primero:
const el = document.getElementsByClassName('test') $('<div>new text</div>').insertAfter(el[0]) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='test'>First Div</div> <div class='test'>Second Div</div>Puede pedirle a javascript que encuentre los elementos de la clase y luego convierta el resultado en una matriz y encuentre el primer elemento que coincida con su condición.
const elements = Array.from(document.getElementsByClassName("test")); const target = elements.find(el => el.innerHTML === 'First Div'); $('<h2>Inserting New Text</h2>').insertAfter(target); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='test'>First Div</div> <div class='test'>Second Div</div>