Динамически создавайте несколько элементов div внутри функции успеха ajax, основываясь на количестве данных внутри json

Question

Я хочу динамически создавать элементы div в ajax success, причем каждый элемент div имеет свой id в качестве «id» из данных ответа!есть ли способ сделать это?кто-нибудь может мне помочь, пожалуйста!я приложил кодовую ручку, отсекаемую ниже моей работы, тоже.

https://codepen.io/anon/pen/JxXvbb?editors=1111#anon-login

  window.onload = function() {
    $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                // console.log(msg);

                   for(var i = 0; i < msg.results.length; i++)
   {
let idx=msg.results[i].id
let titlex=msg.results[i].title;
let imagesrcx=msg.results[i].poster_path;
   console.log("ID: " +idx); 
   console.log("title: "+titlex);
   console.log("image src: "+imagesrcx);

   let new_div ='<div><div id="'+ idx +'">'+'</div></div>';

            $("main").append(new_div);
   //console.log(msg);
   }

            }

});

};

Answer 1

, если вы используете jquery, в вашем успешном обратном вызове

msg.results.forEach((e)=>{
    const div = $(`<div id=${e.id}>${e.title}</div>`);
    $("#main").append(div);
});

Answer 2

Это должно помочь.

#main>div{
  display: inline-block;
  width: 33%;
  margin-bottom: 10px;
}

window.onload = function() {
    $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                   for(var i = 0; i < msg.results.length; i++)
   {
                     // console.log(msg);


let idx=msg.results[i].id
let titlex=msg.results[i].title;
let imagesrcx=msg.results[i].poster_path;
     console.log(imagesrcx);
$("#main").append(`
<div style='background:#000;' id='`+idx+`'>
  <img src='`+imagesrcx+`' alt='`+titlex+`'>
</div>
`);
   //console.log(msg);
   }

            }

});

};

Answer 3

Почему бы просто не использовать document.createElement?Кажется, самый простой способ - динамически создавать и устанавливать id, здесь нет необходимости в jQuery.

   for(var i = 0; i < msg.results.length; i++){
        const div = document.createElement('div');
        div.id = msg.results[i].id;
        $("#main").append(div);
    }

Теперь вы можете использовать его с jQuery.Если вы хотите добавить к нему текст, просто также установите innerText.

Вот полный код: window.onload = function () {

  $.ajax({
            type: "get", 
            dataType: 'jsonp', 
           url:"https://api.themoviedb.org/3/movie/now_playing?api_key=05b5e7574eac47fdf8f2ac12831493c6&language=en-US&page=1", //url to send to 
            contentType: "application/json; charset=utf-8",
            success: function (msg) { 
                // console.log(msg);

              for(var i = 0; i < msg.results.length; i++) {
                 let idx=msg.results[i].id
                 let titlex=msg.results[i].title;
                 let imagesrcx=msg.results[i].poster_path;
                 console.log("ID: " +idx); 
                 console.log("title: "+titlex);
                 console.log("image src: "+imagesrcx);

                 const new_div = document.createElement('div');
                 new_div.id = idx;
                 new_div.innerText = titlex;

                $("#main").append(new_div);
              }
            }
    });
};

Working stackblitz; введите описание ссылки здесь

РЕДАКТИРОВАТЬ: Я также понял, что вы забыли добавить «#», чтобы выбрать основной div, который может помочь.