title: Append Image and text together to the list in javascript
body: <p>I am doing a simple weather application. As you can see from the code below, I am showing 5-day forecast, I want to show as a list, but there is a problem that I can not append an image to my list elements for every day.  </p>
  
  <p>my js file</p>
  
  <pre><code>for (var i = 0; i &lt; 5; i++) {
          var li = document.createElement("li");
          var iconurl = "https://openweathermap.org/img/w/" + forecast[i].image.toString() + ".png";
  
  
              var t = document.createTextNode("Date: " + forecast[i].date.toString().substring(8, 10)
                  + "/" + forecast[i].date.toString().substring(5, 7) + " "
                  + "Current Temperature: " + forecast[i].temperature.toString() + " "
                  + "Maximum: " + forecast[i].temperature_max.toString() + " "
                  + "Minimum:  " + forecast[i].temperature_min.toString() + " "
                  + "Description: " + forecast[i].text.toString() + " ");
              li.appendChild(t);
              document.getElementById("myUL").appendChild(li);
              document.getElementById("myInput").value = "";
  </code></pre>
  
  <p>my Html file</p>
  
  <pre><code>&lt;div id="myDIV" class="header"&gt;
      &lt;h2 style="margin:5px"&gt;Weather Application&lt;/h2&gt;
      &lt;p id="title"&gt;You can search here.&lt;/p&gt;
      &lt;input type="text" id="myInput" placeholder="Search..."&gt;
      &lt;span onclick="gettingJSON()" class="addBtn"&gt;Add&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;ul id="myUL"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>My List output like this. 
  My Question about; For example, I want to add images next to the "light rain" and other 5 days as you can see below picture. How can I add it?
  <a href="https://i.stack.imgur.com/ulABH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ulABH.png" alt="My list output like this"></a></p>