如何用for循环结合document.getElementById实现一键批量复制文本内容

需求说明 #

原代码仅能将ID为a1的元素文本内容复制到ID为b1的元素中，需要修改为点击提交按钮时，批量完成a1→b1、a2→b2、a3→b3、a4→b4的文本复制操作，要求使用for循环结合document.getElementById实现。

修改后的完整代码 #

<!-- HTML结构 -->
<div id="a1">文本内容1</div>
<div id="a2">文本内容2</div>
<div id="a3">文本内容3</div>
<div id="a4">文本内容4</div>

<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>

<button onclick="copyText()">提交</button>

<script>
// JavaScript逻辑
function copyText() {
  // 遍历1到4，批量处理每一组元素
  for (let i = 1; i <= 4; i++) {
    // 获取当前组的源元素和目标元素
    const sourceEl = document.getElementById(`a${i}`);
    const targetEl = document.getElementById(`b${i}`);
    
    // 判空处理，避免元素不存在时报错
    if (sourceEl && targetEl) {
      targetEl.innerText = sourceEl.innerText;
    }
  }
}
</script>

关键逻辑说明 #

• 使用for循环从1到4遍历，通过模板字符串a${i}和b${i}动态生成元素ID，结合document.getElementById获取对应元素
• 添加了元素存在性判断，防止因页面元素缺失导致的JS报错
• 点击按钮时触发copyText函数，一次性完成4组元素的文本复制操作

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