javascript - 将图像和文本一起附加到javascript中的列表

Question

我正在做一个简单的天气应用程序。正如您从下面的代码中看到的，我正在显示 5 天的预报，我想显示为一个列表，但是有一个问题，我无法每天将图像附加到我的列表元素中。

我的js文件

for (var i = 0; i < 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 = "";

我的 HTML 文件

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

我的列表输出是这样的。我的问题关于；例如，我想在“小雨”和其他 5 天旁边添加图像，如下图所示。我怎样才能添加它？

Answer 1

这是你所缺少的:

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

如果你想把图片放在文字之前，你应该先附加它。