Html 在domjQuery中可以使用canvas元素吗？

我不熟悉jquery

可以在domjQuery中添加canvas类吗？ canvas类包括我希望用于api的Skycons图标

 $.ajax ({
 url: "url",
  type: "GET",
  dataType: 'json',
  success: function(e) {

       let icon = e.weather[0].icon;
          switch (icon) {
            case "01d":
              icon = "CLEAR_DAY";
              break;
            case "01n":
              icon = "CLEAR_NIGHT";
              break;
            case "02d":
              icon = "PARTLY_CLOUDY_DAY";
              break;
            case "02n":
              icon = "PARTLY_CLOUDY_NIGHT";
              break;
            case "03d":
              icon = "CLOUDY";
              break;
            case "03n":
              icon = "CLOUDY";
              break;
            case "04d":
              icon = "CLOUDY";
              break;
            case "04n":
              icon = "CLOUDY";
              break;
            case "09d":
              icon = "RAIN";
             break;
            case "09n":
              icon = "RAIN";
              break;
            case "10d":
              icon = "RAIN";
              break;
            case "10n":
              icon = "RAIN";
              break;
            case "11d":
              icon = "RAIN";
              break;
            case "11n":
              icon = "RAIN";
              break;
            case "13d":
              icon = "SNOW";
              break;
            case "13n":
              icon = "SNOW";
              break;
            case "50d":
              icon = "FOG";
              break;
            case "50n":
              icon = "FOG";
              break;
          } 

然后添加函数

 setIcons(icon, document.querySelector(".icon"));

        function setIcons(icon, iconID) {
          const skycons = new Skycons({ color: "white" });
          const currentIcon = icon;
           skycons.play();
         return skycons.set(iconID, Skycons[currentIcon]);
      }
    let variable ='';

    variable += '<div class="row h-100">';
    variable += '   <canvas class="icon" width="128" height="128"></canvas>';        
    variable += '</div>';

    $('#letWeather').html(variable);

 }
});

setIcons（图标，document.querySelector（“.icon”）；
功能设置图标（图标，图标标识）{
const skycons=新的skycons（{color:“white”}）；
const currentIcon=图标；
天敌。play（）；
返回skycons.set（iconID，skycons[currentIcon]）；
}
设变量=“”；
变量+=''；
变量+=''；
变量+=''；
$（'#letWeather'）.html（变量）；
}
});

然后将此id添加到Html

<div id="letWeather"></div>

它不显示

但是如果我把它添加到HTML中，在DOM之外。它确实有效。为什么?

<canvas class="icon" width="128" height="128"></canvas>

看看你做事的顺序

首先，使用类

图标

在DOM中搜索一个元素，然后对所找到的内容进行处理

接下来，创建一个字符串，其中包含一些HTML，其中包含该类的元素

最后，使用该HTML将该元素添加到DOM中

---

---

如果在将其添加到DOM之前在DOM中搜索，则无法找到它。

很可能是因为

let

是一个，无法重新分配。您应该会在浏览器控制台中看到一个错误。“是否可以[使用]jquery[添加]画布元素”-是的，当然可以。确保您在doc.ready中运行jquery代码（将其包装在

$（function（）{…here…}）

中，或者确保您的代码在页面上的

letWeather

元素之后运行。以下是您在doc.ready中运行良好的代码：（无论如何，JSFIDLE不会将代码放在末尾）关于<代码>让<代码>作为一个变量名：我当然会考虑一个不同的名称，但是你可以使用它作为一个变量名，没有问题。<代码>这是怎么回事如果你能再多给我解释一点的话可能会很好。你说我找不到它是什么意思？我的意思是如果你拿一张空白纸，读出上面写的内容，然后写上“这是一个图标”，那么你读出的单词将是“”，而不是“这是一个图标”.好的.你知道怎么解决这个问题吗？把三个步骤的顺序颠倒过来。