Почему отрисовывается HTML-элемент (наподобие

---

), тогда когда в коде его нет?

fetch('http://api.openweathermap.org/data/2.5/weather?id=703845&appid=0db48c216c96f30bd3f970f8364644fe')
.then(function (response) { return response.json()})
.then(function (data) {  
    console.log(data);
    
    document.querySelector('h3').innerHTML = data.name
    document.querySelector('.img_whether').innerHTML = `<img src="http://openweathermap.org/img/wn/[email protected]">`
    document.querySelector('span').innerHTML = Math.floor(data.main.temp -273)
})
.catch(function () {
    
}); 

div {
    margin: 0px 70px ;
    width: 150px;
    height: 550px;
    padding: 0 20px;
    border: 3px solid rgb(22, 155, 207);
    border-radius: 6px;
    text-align: center;
  }
  
  div h3 {
    margin: 45px 0 10px 0;
    font-size: xx-large;
    color: rgb(47, 164, 231);
  }
  
  div p {
    padding: 40px 0;
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
    font-size: xxx-large;
  }
  
  div button {
    cursor: pointer;
    outline: none;
    border: none;
    width: 90px;
    height: 45px;
    background: rgba(47, 164, 231, 0.514);
  }

 <div>
        <h3>Киев</h3>
        
        <p><span>10</span> &deg;</p>
        <span class="img_whether"></span>
        <button>GO</button>
      </div>