如何通过数组中的变量名修改对应DOM元素的innerHTML？

你的代码核心问题是数组中存储的是元素ID的字符串，而非实际的DOM元素对象——字符串类型不存在innerHTML属性，所以array[1].innerHTML = "Hello World"无法生效。

方案一：直接存储DOM元素到数组 #

把已获取的DOM元素本身存入数组，就能直接通过索引调用元素的innerHTML：

const firsthtmlelement = document.getElementById("firsthtmlelement");
const secondhtmlelement = document.getElementById("secondhtmlelement");

// 存入DOM元素而非ID字符串
const elementsArray = [firsthtmlelement, secondhtmlelement];

// 修改第二个元素的内容
elementsArray[1].innerHTML = "Hello World";

方案二：存储ID字符串，使用时动态获取元素 #

如果需要保留ID字符串的存储方式，修改时通过ID重新获取DOM元素即可：

const array = ['firsthtmlelement', 'secondhtmlelement'];

// 通过ID获取元素后修改内容
document.getElementById(array[1]).innerHTML = "Hello World";

实现点击操作后的动态修改 #

结合点击事件，可实现按数组条目切换修改元素内容的需求，示例如下：

<!-- 页面结构示例 -->
<div id="firsthtmlelement">默认内容1</div>
<div id="secondhtmlelement">默认内容2</div>
<button id="modifyBtn">切换修改元素</button>

<script>
const elementsArray = [
  document.getElementById("firsthtmlelement"),
  document.getElementById("secondhtmlelement")
];
let targetIndex = 0;

const modifyBtn = document.getElementById("modifyBtn");
modifyBtn.addEventListener('click', function() {
  // 重置所有元素内容（可选操作）
  elementsArray.forEach(el => el.innerHTML = '');
  // 修改目标元素内容
  elementsArray[targetIndex].innerHTML = "Hello World";
  // 切换目标索引，实现循环修改
  targetIndex = (targetIndex + 1) % elementsArray.length;
});
</script>

点击按钮时，会轮流将数组中的元素内容设置为"Hello World"。

内容的提问来源于stack exchange，提问作者Ethan B