将价值从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;

只需用您的回复数据替换我的号码