title: JavaScript DOM - how to add class to each <img> and add <p> above each immage
body: <p>I have a problem with adding class to each <code>img</code> and <code>p</code> doesn't display anything for each image. Here is my code...</p>
  
  <pre><code>var list = [
      {
          id: 1,
          title: "Dope",
          img: "pic/dope.jpg",
          link: "dope.html"
      },
      {
          id: 2,
          title: "The Do Over",
          img: "pic/The_Do-Over.png",
          link: "The_Do-Over.html"
      },
      {
          id: 3,
          title: "Deadpool",
          img: "pic/Deadpool.jpg",
          link: "Deadpool.html"
      },
      {
          id: 4,
          title: "Johnny English Reborn",
          img: "pic/johnny_english_reborn.jpg",
          link: "johnny_english_reborn.html"
      }
  ];
  
  var input = document.getElementById("input");
  
  function createList() {
  
      var ul = document.createElement('ul');
  
      for (var i = 0; i &lt;list.length; i++) {
  
  
          //create li
          var li = document.createElement('li');
          li.id = list[i].id;
  
          //create paragraph -------------- doesnt desplay anything--problem
          var p = document.createElement('p');
          p.title = list[i].title;
          li.appendChild(p);
  
          //create image
          var img = document.createElement("img");
          img.src = list[i].img;
          img.title = list[i].title;
  
          //adding class
          img.class = "image";
  
          //create href
          var a = document.createElement("a");
          a.href = list[i].link;    
          a.appendChild(img);
          li.appendChild(a);
  
          //append this li to the ul
          ul.appendChild(li);
  
      }
  
      //outside the loop, append once the ul to the wrapper
      input.appendChild(ul);
      console.log(ul);
  
  
  };
  
  createList();
  </code></pre>