为js中的每个数据附加div

Question

I'm using AJAX to append data to div element. The div class item style display is none because the div class only appear when the success function works.basically the div class dependent on the success function.

<div class="item" style="display: none;">
<div class="Name"></div> //here I want to show the success function data
<select class="price">
 <option>A</option>
 <option>B</option>
 <option>C</option></select>
</div>

div only shows when it finds data. I want to add data in div class="Name" and append each data. like when first data is added then the item div will show and when the 2nd data is added then 2nd data will be shown. for each data div class item , Name , price will appear. In this code data only appending in the same div.

success:function(data) {
console.log(data);
$('.item').show();
$('.Name').append(data);}

How can i do this?

Answer 1

Having a parent container

<div class="items">
</div>

You can use append to create new "item" elements inside this container using append

// create inner element
var newItem=$('<div class="item"></div>');
// inserting data
newItem.html(data);
// append to parent container
 $('.items').append(newItem);

Answer 2

So, the very simple answer here is your in-line styling. If you look at the code, you have written display: none; . This tells the rendering engine to hide it from the current object model.

However, when the success function runs, it executes .show() which disables display: none; .

To fix this,

<div class="items" style="display: none;"></div>

Then you can store that as a literal and dynamically add content using mapping like so:

$( '.items' ).show();
const dataHtml = '<div class="item">' + data + '</div>';
$( '.items' ).append( dataHtml );

---

PS: You can check it out here .

Answer 3

you can use this to append new div of items. you need to add item container which is the div with id all_items

<div id="all_items"></div>

success:function(data) {
console.log(data);
$('#all_items').append('<div class="item">+data+</div>');
}