Question

我正在尝试动态创建DOM元素，以显示数组中所有对象的每个对象值。

我使用了一个for循环来创建元素，并尝试将内容迭代与数组迭代匹配，但这是行不通的。下面是我的代码（这是使代码正常工作的简化版本）。

let divTwo = document.querySelector('.div-two');
let bigArray = [{
    first: 'Joe',
    location: 'Washington'
  },
  {
    first: 'Jon',
    location: 'Boston'
  },
  {
    first: 'Brian',
    location: 'New York'
  },
];
let smallArray = ['first', 'location'];

function addNames() {
  for (let i = 0; i < bigArray.length; i++) {
    for (let j = 0; j < smallArray.length; j++) {
      let newSpan = document.createElement('span');

      newSpan.id = 'spanny' + (j + 1);
      divTwo.appendChild(newSpan);
      document.getElementById('spanny1').textContent = bigArray[j].first;
      document.getElementById('spanny2').textContent = bigArray[j].location;

      // newSpan[0].textContent = bigArray[0].first;     *also doesn’t work*
      // newSpan[1].textContent = bigArray[0].location;  *also doesn’t work*
    }
  }
}

addNames();

Answer 1

您真的不想将这些ID添加到<span>中，因为它们将在您的页面上分别出现3次，这是无效的。

您可能正在寻找类似的东西。您想要获取i的第bigArray个元素，然后获取与j中的第smallArray个元素给定的键关联的值。因此，请使用bigArray[i][smallArray[j]]。

function addNames() {
  for (let i = 0; i < bigArray.length; i++) {
    for (let j = 0; j < smallArray.length; j++) {
      let newSpan = document.createElement("span");

      divTwo.appendChild(newSpan);
      newSpan.textContent = bigArray[i][smallArray[j]];
    }
  }
}

使用ECMAScript 6+可以更清洁：

function addNames() {
  bigArray.forEach((data) => divTwo.append(...smallArray.map((key) => Object.assign(document.createElement("span"), {
    textContent: data[key]
  }))));
}

用不同的文本创建DOM元素

1 个答案: