在for循环中使用它来绘制对象时如何防止变量覆盖

Question

我想使用 JS 原生脚本创建 HTML 对象。我有一个函数，可以绘制一些文本，我想优化它。

当我使用它时，它必须使用循环在 HTML 中写入一些文本来进行多次不同的迭代，但我发现新循环不会在 HTML 中创建新对象，而是重新创建之前的对象。

    paintPrimary: (id, alias, country, date, content) => {
        let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
        console.log(primaryArray);
        const $primary = document.createElement('div');
        $primary.className = 'teamHeaders';

        for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter ++) {
            $primary.innerHTML = primaryArray[primaryCounter];
            document.getElementById(id).appendChild($primary);
        }
    }

我尝试使用构造函数但没有成功。正在考虑每次迭代都创建一个新变量，但我不知道如何做这样的事情，也没有找到任何信息

Answer 1

在循环内创建元素

div

。在您的情况下，您只创建一次

div

，因此它会被覆盖

paintPrimary: (id, alias, country, date, content) => {
  let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
  for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
    // changed here
    const $primary = document.createElement('div'); 
    $primary.className = 'teamHeaders';
    $primary.innerHTML = primaryArray[primaryCounter];
    document.getElementById(id).appendChild($primary);
  }
}

Answer 2

试试这个：

paintPrimary: (id, alias, country, date, content) => {
    let primaryArray = ['Alias', 'Country', 'Date', 'Description'];
    console.log(primaryArray);

    for (let primaryCounter = 0; primaryCounter < primaryArray.length; primaryCounter++) {
        const $primary = document.createElement('div');
        $primary.className = 'teamHeaders';
        $primary.innerHTML = primaryArray[primaryCounter];
        document.getElementById(id).appendChild($primary);
    }
}

当您多次调用

paintPrimary

时，它会为每次调用创建单独的div元素集，而不是覆盖之前的内容。