html - Append Image and text together to the list in javascript - Stack Overflow

admin管理员组

文章数量:1399499

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.

my js file

for (var i = 0; i < 5; i++) {
        var li = document.createElement("li");
        var iconurl = "/" + 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 = "";

my Html file

<div id="myDIV" class="header">
    <h2 style="margin:5px">Weather Application</h2>
    <p id="title">You can search here.</p>
    <input type="text" id="myInput" placeholder="Search...">
    <span onclick="gettingJSON()" class="addBtn">Add</span>
</div>

<ul id="myUL">

</ul>

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?

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.

my js file

for (var i = 0; i < 5; i++) {
        var li = document.createElement("li");
        var iconurl = "https://openweathermap/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 = "";

my Html file

<div id="myDIV" class="header">
    <h2 style="margin:5px">Weather Application</h2>
    <p id="title">You can search here.</p>
    <input type="text" id="myInput" placeholder="Search...">
    <span onclick="gettingJSON()" class="addBtn">Add</span>
</div>

<ul id="myUL">

</ul>

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?

• javascript
• html
• css
• image

Share Improve this question Follow asked Apr 23, 2018 at 23:04 M.J.WatsonM.J.Watson 48077 silver badges1818 bronze badges 2

• forecast[i].image.toString(), is only returning like "a10n". And that URL is working when I displayed it on a different list or div. – M.J.Watson Commented Apr 23, 2018 at 23:12
• In that case, all you need is to create an image (document.createElement("img");) and place the resulting string in the src attribute. And append it to its respective li, of course. – tao Commented Apr 23, 2018 at 23:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Here is what you're missing:

var image = document.createElement("img");
image.setAttribute("src", iconurl);
li.appendChild(image);

If you want the image before the text, you should append it first.

You need to create an image element, set its src to the url, and append it to your li.

for (var i = 0; i < 5; i++) {
  var li = document.createElement("li");
  var iconurl = "https://openweathermap/img/w/" + forecast[i].image.toString() + ".png";
  var img = li.appendChild(document.createElement('img'));
  img.src = iconurl;
  var t = // ...

You simply didn't used this variable at all iconurl You can create Image element as

for (var i = 0; i < 5; i++) { 
var li = document.createElement("li"); 
var iconurl = "https://openweathermap/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() + " ");
var img = document.createElement("img"); 
img.src=iconurl;
img.width=20;
img.height=20;
 li.appendChild(t);
li.appendChild(img); document.getElementById("myUL").appendChild(li); document.getElementById("myInput").value = "";

本文标签： htmlAppend Image and text together to the list in javascriptStack Overflow