I am trying to append a div on each element with class name 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>`)
}
But it appends as a string not as a HTML code and shows a preview like this
<div class="input-group mt-2"> <div class="input-group-text">Correct Answer</div> <div class="form-control">2</div> </div>
Why is it not working?
You don't need to iterate through the array of elements having class preview-card-body. You can simply do this as follows
$(".preview-card-body").append(`<div class="input-group mt-2">
<div class="input-group-text">Correct Answer</div>
<div class="form-control">1</div>`)
It will automatically append the html in every element with the class in question i.e. preview-card-body.
Here is a running code sample for you.
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>