有没有办法使用 javascript 插入不同 id 的 innerHTML

Question

var res = document.querySelectorAll("#a,#b,#c,#d")
res[0].innerHTML = "apple"
res[1].innerHTML = "bananna"
res[2].innerHTML = "orange"
res[3].innerHTML = "lemon"

<p id="a"></p>
<p id="b"></p>
<p id="c"></p>
<p id="d"></p>

这运行很好，但我希望能够使用这样的东西：

var res = document.querySelectorAll("#a,#b,#c,#d")[i].innerHTML = 
  {"apple","bananna","orange","lemon"}

Answer 1

使用简单的循环。我强烈建议您复习一些简单的 JS tutorial 以便您享受编码的乐趣

const elements = document.querySelectorAll("#a,#b,#c,#d")
for (let i = 0; i < elements.length; i++) {
  elements[i].innerHTML = `text${i + 1}`
}

Answer 2

就数据而言，您至少需要一种选择目标的方法、该目标的一段内容，以及将目标和内容联系在一起的方法。可以这样做的一种方法是：

const data = [
  ['#a', 'apple'],
  ['#b', 'banana'],
  ['#c', 'orange'],
  ['#d', 'lemon'],
];

现在您已拥有所有必要的数据及其关联，使用它可能如下所示：

data.forEach(([target, content]) => {
  const element = document.querySelector(target);
  if(element) element.innerHTML = content;
});

参考：

有没有办法使用 javascript 插入不同 id 的 innerHTML

Is there a way to insert innerHTML of different ids using javascript

javascript

variables