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

我正在做一个简单的天气应用程序。正如您从下面的代码中所看到的，我正在显示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 = "";

for（变量i=0；i<5；i++）{
var li=document.createElement（“li”）；
变量iconurl=”https://openweathermap.org/img/w/“+forecast[i].image.toString（）+”.png”；
var t=document.createTextNode（“日期：”+forecast[i].Date.toString（）.substring（8,10）
+“/”+预测[i].date.toString（）子字符串（5,7）+”
+“当前温度：”+预测[i]。温度。toString（）+“”
+“最大值：”+预测[i]。温度_max.toString（）+“”
+“最小值：”+预测[i]。温度\u min.toString（）+“”
+描述：“+forecast[i].text.toString（）+”；
li.儿童（t）；
文件.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天旁边添加图像，如下图所示。我如何添加它？

---

您根本没有使用这个变量

iconurl

可以将图像元素创建为

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() + " ");
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 = "";

（变量i=0；i<5；i++）的

var li=document.createElement（“li”）；
变量iconurl=”https://openweathermap.org/img/w/“+forecast[i].image.toString（）+”.png”；
var t=document.createTextNode（“日期：”+forecast[i].Date.toString（）.substring（8,10）+“/”+forecast[i].Date.toString（）.substring（5,7）++”+“当前温度：”+forecast[i].Temperature.toString（）+“最大值：”+forecast[i].Temperature\u max.toString（）+“最小值：”+forecast[i].Temperature\u min.toString（）+“+描述：“+forecast[i].text.toString（）+”；
var img=document.createElement（“img”）；
img.src=iconurl；
img.宽度=20；
img.高度=20；
li.儿童（t）；
li.appendChild（img）；document.getElementById（“myUL”）.appendChild（li）；document.getElementById（“myInput”）.value=“”；

您根本没有使用这个变量

iconurl

可以将图像元素创建为

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() + " ");
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 = "";

（变量i=0；i<5；i++）的

var li=document.createElement（“li”）；
变量iconurl=”https://openweathermap.org/img/w/“+forecast[i].image.toString（）+”.png”；
var t=document.createTextNode（“日期：+forecast[i].Date.toString（）.substring（8,10）+“/”+forecast[i].Date.toString（）.substring（5,7）++”“+”当前温度：+forecast[i].Temperature.toString（）+”“+最大值：+forecast[i].Temperature\u max.toString（）+”“+最小值：+forecast[i].Temperature\u min.toString（）+”“”描述：“+forecast[i].text.toString（）+”；
var img=document.createElement（“img”）；
img.src=iconurl；
img.宽度=20；
img.高度=20；
li.儿童（t）；
li.appendChild（img）；document.getElementById（“myUL”）.appendChild（li）；document.getElementById（“myInput”）.value=“”；

以下是您缺少的内容：

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

---

如果要在文本之前添加图像，应先添加图像。

以下是缺少的内容：

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

---

如果您希望在文本之前添加图像，则应首先添加图像。

您需要创建图像元素，将其

src

设置为url，然后将其添加到

li

中

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 img = li.appendChild(document.createElement('img'));
  img.src = iconurl;
  var t = // ...

for（变量i=0；i<5；i++）{
var li=document.createElement（“li”）；
变量iconurl=”https://openweathermap.org/img/w/“+forecast[i].image.toString（）+”.png”；
var img=li.appendChild（document.createElement（'img'）；
img.src=iconurl；
变量t=/。。。

您需要创建一个图像元素，将其

src

设置为url，并将其附加到

li

中

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 img = li.appendChild(document.createElement('img'));
  img.src = iconurl;
  var t = // ...

for（变量i=0；i<5；i++）{
var li=document.createElement（“li”）；
变量iconurl=”https://openweathermap.org/img/w/“+forecast[i].image.toString（）+”.png”；
var img=li.appendChild（document.createElement（'img'）；
img.src=iconurl；
变量t=/。。。

forecast[i].image.toString（）只会像“a10n”一样返回。当我将URL显示在不同的列表或div上时，该URL会起作用。在这种情况下，您只需创建一个图像（

document.createElement（“img”）；

）然后将结果字符串放在

src

属性中。当然，将其附加到相应的

li

。forecast[i].image.toString（）只返回“a10n”格式。当我将其显示在不同的列表或div上时，该URL起作用。在这种情况下，您只需创建一个图像（

document.createElement（“img”）；

）并将结果字符串放入

src

属性中。当然，还要将其附加到相应的

li

。