Javascript 从fetch/async中调用的函数返回不同的HTML元素

我正在从本地文件中检索json数据，我希望使用HTML显示该文件。问题是，当我调用函数从fetch/async函数中创建HTML元素时，元素的高度在某种程度上是0

function createElements(naam) {
var div2 = document.createElement('div');
var attributeDiv2 = document.createAttribute('class');
attributeDiv2.value = naam;
div2.setAttributeNode(attributeDiv2);
....
....more things
....

致电：

fetch("wijnen.json")
.then(response => response.json())
.then(json => {
  for (var i = 0; i < json['Wijnen'].length; i++){
    createElements(json['Wijnen'][i].naam);
  }
});

fetch（“wijnen.json”）
.then（response=>response.json（））
。然后（json=>{
for（var i=0；i

或

异步函数getData（）{ 试一试{ let response=wait-fetch（'wijnen.json'）； 让data=wait response.json（）； 返回数据； }捕捉（错误）{ 控制台日志（err）； 返回null； } } （异步函数（）{ 让数据=等待getData（）； log（数据['Wijnen']）； for（var i=0；i 将导致

但是，当我不是从fetch或异步函数中调用函数时（例如，我传递了一个随机字符串“test”），它看起来是这样的：

那我为什么不这样做呢？因为如果调用fetch/async函数之外的函数，我不知道如何从json文件访问数据

奇怪的是，如果我检查高度为0的元素，我可以看到正确传递了json数据，如果我获得了源代码并在本地运行，元素的高度不等于0，我可以看到传递的json数据。我在服务器上运行此操作，因为

fetch

在本地不起作用

---

如果我从fetch/async函数中调用

createElements（）

函数，为什么元素的高度等于零？我该如何解决这个问题？

为什么要在读取：let data=wait response.json（）的行上等待response.json（）；Async是无序执行的，因此脚本在页面上有元素之前就已经运行了。@Terrance response.json（）返回Promise@serraosays使用

constdelay=ms=>newpromise（res=>setTimeout（res，ms））和<代码>等待延迟（2000）不会对所示代码中的预期工作情况产生影响。最后一个
console.log（data['Wijnen']）是什么给你看？
await getData（）
why you waiting response.json（）一行的后面一个：let data=await response.json（）；Async是无序执行的，因此脚本在页面上有元素之前就已经运行了。@Terrance response.json（）返回Promise@serraosays使用
constdelay=ms=>newpromise（res=>setTimeout（res，ms））和<代码>等待延迟（2000）不会对所示代码中的预期工作情况产生影响。最后一个
console.log（data['Wijnen']）是什么给你看？
wait getData（）之后的一个
async function getData() {
  try {
    let response = await fetch('wijnen.json');

    let data = await response.json();
    
    return data;
  } catch(err) {
    console.log(err);
    return null;
  }
}

(async function() {
    let data = await getData();
    console.log(data['Wijnen']);
    for (var i = 0; i < data['Wijnen'].length; i++){
      createElements(data['Wijnen'][i].naam);
    }
}());