无法将动态创建的“ p”标签和“ img”标签包装在动态创建的“ div”标签内

Question

Im trying wrap the image tag and title tag inside the div tag (all are created dynamically) but for some odd reason it says "TypeError: Assignment to constant variable.at Array.forEach"! could someone tell me what am i doing wrong in this code also if its not much, i also want to know if there is a way to add event listener to all these dynamic divs or images of these div! thank you ...

 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

If you want to add the items to the div , you can .append(...) them the same way you did with $("#main").append() :

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

However, your CSS definitions don't match p or img if they're inside of a div , so you may want to touch those up.

 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> 

Answer 2

See comments inline:

 // 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>