Estoy tratando de agregar un div en cada elemento con el nombre de clase preview-card-body.
for(let q=0;q<$(".preview-card-body").length ; q++) { $(".preview-card-body")[q].append(`<div class="input-group mt-2"> <div class="input-group-text">Correct Answer</div> <div class="form-control">1</div> </div>`) }Pero se agrega como una cadena, no como un código HTML y muestra una vista previa como esta
<div class="input-group mt-2"> <div class="input-group-text">Correct Answer</div> <div class="form-control">2</div> </div>¿Por qué no funciona?
No necesita iterar a través de la matriz de elementos que tienen la clase preview-card-body . Simplemente puede hacer esto de la siguiente manera
$(".preview-card-body").append(`<div class="input-group mt-2"> <div class="input-group-text">Correct Answer</div> <div class="form-control">1</div>`) Automáticamente agregará el html en cada elemento con la clase en cuestión, es decir preview-card-body .
Aquí hay una muestra de código en ejecución para usted.
function myFunction() { var content = `<div class="input-group mt-2"> <div class="input-group-text">Correct Answer</div> <div class="form-control">1</div> </div>`; $(".preview-card-body").append(content) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preview-card-body"></div> <div class="preview-card-body"></div> <div class="preview-card-body"></div> <div class="preview-card-body"></div> <div class="preview-card-body"></div> <button type="button" onclick="myFunction()">Append</button>