如何将来自API的数据注入DOM [重复]

Question

我正在尝试通过一个api调用获取一个城市，并希望显示在html页面中，但是在html页面中，我得到了不确定的信息，您可以在这方面帮我吗，我的假设是获取方法不同步，有人可以看一下代码吗？告诉我这是什么错误

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app"></div>
  <div style="text-align:center">
    <h1>Select a City to Appear in ClickedCity</h1>
  </div>
  <table>
    <tr>
      <th>City</th>
    </tr>
    <tr>
      <td class="city" id="city1"></td>
    </tr>
  </table>
  </div>
  </div>
  <div style="float:right">
    <table>
      <tr>
        <th>ClickedCity</th>
      </tr>
      <tr>
        <td>TBD</td>
      </tr>
    </table>

    <script>
      var city_list = document.getElementById("city1");
      console.log(city_list);

      // city_list.addEventListener("DOMContentLoaded", getData);

      function getData() 
        fetch("https://jsonplaceholder.typicode.com/users")
          .then(res => res.json())
          .then(res => 
            console.log(res[1].address.city);
            return res[1].address.city;
          );
      

      city_list.innerHTML = getData();
    </script>
</body>

</html>

JS代码：

import "./styles.css";

var city_list = document.getElementById("city1");
console.log(city_list);

// city_list.addEventListener("DOMContentLoaded", getData);

function getData() 
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(res => 
      console.log(res[1].address.city);
      return res[1].address.city;
    );


city_list.innerHTML = getData();

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
    <div style="text-align:center">
        <h1 >Select a City to Appear in ClickedCity</h1>
        </div>
        <table>
                <tr>
                    <th>City</th>
                </tr>
                <tr>
                    <td class="city" id="city1"></td>
                </tr>
            </table>
        </div>
    </div>
    <div style="float:right">
        <table>
            <tr>
                <th>ClickedCity</th>
            </tr>
            <tr>
                <td>TBD</td>
            </tr>
        </table>

    <script src="src/"> <!--  javascript file is here-->
    </script>
</body>

</html>

enter image description here