невозможно обернуть динамически созданный тег "p" и тег "img" внутри динамически созданного тега "div"

Question

Я пытаюсь обернуть тег изображения и тег заголовка внутри тега div (все они создаются динамически), но по какой-то странной причине он говорит «TypeError: Назначение константе variable.at Array.forEach»!Может ли кто-нибудь сказать мне, что я делаю неправильно в этом коде, и если его немного, я также хочу знать, есть ли способ добавить прослушиватель событий ко всем этим динамическим элементам div или изображениям этих элементов div!спасибо ...

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

                 msg.results.forEach((e)=>{
    const div = $(`<div id=${e.id}></div>`);
    const title=$(`<p>${e.title}</p>`);
    const img=$(`<img src=https://image.tmdb.org/t/p/w185/${e.backdrop_path}>`);
    //div+='</div>'; // this is what im trying to achieve
    $("#main").append(div);
    $("#main").append(title);
    $("#main").append(img);
});
                       }

});

};

#main
{
  margin-left: 3%;
}


#main>div{
  display: inline-block;
  width: 33%;
  margin-bottom: 10px;
  
}
#main>p
{
  color: red;
  font-size: 150%;

}

#main>img
{
width:10%;

}

 <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<div id="main"></div>

Answer 1

См. Встроенные комментарии:

// Since you are using JQuery, use the document.ready syntax
// which replaces window.onload in your case.
$(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) { 
       msg.results.forEach((e)=>{
        
         // Don't use const if you want to be able to modify the variable later.
         let div = $(`<div id=${e.id}></div>`);
         let title=$(`<p>${e.title}</p>`);
         let img=$(`<img src=https://image.tmdb.org/t/p/w185/${e.backdrop_path}>`);
    
         // Append the title and the img to the new div
         div.append(title);
         div.append(img);
    
         $("#main").append(div); // And then the div to main
        
         // Now that the elements has been made and added to the DOM, you can
         // attach a click event to it easily:
         $(div).on("click", function(){
           // Whatever you need here
           console.clear();
           console.log("You clicked " + e.title);
         });
       });
    }
  });
});

#main { margin-left: 3%; }
#main>div { display: inline-block; width: 33%; margin-bottom: 10px; }
#main > div > p { color: red; font-size: 150%; } /* Your selector was wrong to select the title */

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<div id="main"></div>

Answer 2

Если вы хотите добавить элементы в div, вы можете .append(...) их так же, как вы сделали с $("#main").append():

div.append(title).append(img); //append title and image to div
$("#main").append(div);        //append div to main

Однако ваши определения CSS не совпадаютp или img, если они внутри div, так что вы можете их подправить.

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",
    contentType: "application/json; charset=utf-8",
    success: function(msg) {

      msg.results.forEach((e) => {
        let div = $(`<div id=${e.id}></div>`);
        let title = $(`<p>${e.title}</p>`);
        let img = $(`<img src=https://image.tmdb.org/t/p/w185/${e.backdrop_path}>`);

        div.append(title).append(img);
        $("#main").append(div);

      });
    }

  });

};

#main {
  margin-left: 3%;
}

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

#main > div > p {
  color: red;
  font-size: 150%;
}

#main > div > img {
  width: 10%;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div id="main"></div>