將價值從JavaScript傳遞到HTML

Question

    // Geometry
    var lat = response.data.results[0].geometry.location.lat;
    var lng = response.data.results[0].geometry.location.lng;

    var geometryOutput = `
      <ul class="list-group">
        <li class="list-group-item"><strong>Latitude</strong>: ${lat}</li>
        <li class="list-group-item"><strong>Longitude</strong>: ${lng}</li>
      </ul>
      ;
    document.getElementById('geometry').innerHTML = geometryOutput;

  })

如何將${lat}值傳遞給HTML？ 可能嗎？

Answer 1

是的，您可以使用純JavaScript來做到這一點，如下所示：

document.getElementById("get-lat").innerHTML=lat

然后在您的html中，創建一個具有唯一ID的元素：

<span id="get-lat"></span> 

另外，在您的JavaScript代碼中使用jQuery，您可以將${lat}的值傳遞給html，如下所示：

$('#get-lat').html(lat)

您可以選擇使用純JavaScript或類似jQuery的庫來完成此操作。

Answer 2

您可以將class設置為要設置值的元素。 要設置一個值，可以使用append或html表示

例如。

$('.divName').append(lat); or
$('.divName').html(lat);

Answer 3

嘗試在變量前先斷開字符串。 正如@AndyG所說，這可能是一個不同的問題，但這在我的瀏覽器中有效：

var lat = 40;
var lng = 30;

var geometryOutput = '<ul class="list-group"><li class="list-group-item"><strong>Latitude</strong>: '+lat+'</li><li class="list-group-item"><strong>Longitude</strong>: '+lng+'</li></ul>' 

document.getElementById('geometry').innerHTML = geometryOutput;

只需用您的回復數據替換我的號碼