根据json中的数据量在ajax成功函数中动态创建多个div

Question

我希望在ajaxsuccess中动态创建div元素，每个div元素的id都是响应数据中的“id”！有办法吗？谁能帮帮我吗！到目前为止，我还附上了一支在我作品下方剪下的密码笔。

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

  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

#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 2

如果您使用的是jquery，则在成功回调中

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

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);
              }
            }
    });
};

工作突击；在此处输入链接描述

编辑：我还意识到您忘记添加“#”来选择主div，这可能会有所帮助。