JavaScript循环结果顺序异常：最后一项前置问题求助

你遇到的问题出在每次循环都会修改同一个DOM元素的内容，同时克隆操作的时机和选择器逻辑有误：

• 当i=1时，你初始化了cashFlowOne的内容，里面的<span id="periodDiff">是页面中第一个带有该id的元素。
• 后续i>1时，你先克隆newPayment（也就是cashFlowOne），然后执行document.querySelector('#periodDiff').innerHTML = i + " ";——这行代码会找到页面中第一个id="periodDiff"的元素（也就是cashFlowOne里的那个），把它的内容改成当前的i。
• 最后一次循环i=5时，cashFlowOne里的数字被改成了5，而之前克隆出来的元素保留的是克隆时的数字（1、2、3、4），所以最终显示顺序变成了5在前，后面跟着1、2、3、4。

另外，克隆元素时保留了重复的id="periodDiff"，这违反了HTML中id唯一的规则，会导致选择器行为不可预期。

1. 将HTML中的id="periodDiff"改为class="periodDiff"，避免重复id。
2. 修改JS逻辑，每次克隆后只修改当前克隆元素内的周期数字，不影响原元素。

修改后的代码如下：

HTML部分 #

<div>
  <label for="period">Строк проекту (у роках)</label>
  <input id="period" name="period" type="text">
</div>
<div>
  <p>What kind of payment?</p>
  <label for="annuityType">Annuity</label>
  <input id="annuityType" name="cashFlowType" type="radio">
  <label for="differentType">Different payments</label>
  <input id="differentType" name="cashFlowType" type="radio">
</div><br>
<div id="cashFlowType"></div>
<div id="cashFlowPeriods">
  <div id="cashFlowOne"><span class="periodDiff"></span></div>
</div>

JavaScript部分 #

//Determine annuity
const annuity = document.querySelector('#annuityType');
let payment = document.querySelector('#cashFlowType');

function showAnnuity() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowType');
  payment.innerHTML = `<label for="annuity">Сума ануїтету </label><input id="annuity" name="annuity" type="text"><br><br>`;
}
annuity.onclick = showAnnuity;

//Determine different cash flows
const different = document.querySelector('#differentType');

function showDifferentType() {
  payment.innerHTML = ``;
  payment = document.querySelector('#cashFlowPeriods');
  let newPayment;
  // 提前获取周期数并转为数字，避免循环中重复查询DOM
  const periodCount = Number(document.querySelector('#period').value);
  for (let i = 1; i <= periodCount; i++) {
    if (i == 1) {
      newPayment = document.querySelector('#cashFlowOne');
      newPayment.innerHTML = `<label for="diffCashFlow-${i}">Income for period <span class="periodDiff">${i} </span></label><input id="diffCashFlow-${i}" name="differentCashFlow" type="text"><br><br>`;
    } else {
      let np = newPayment.cloneNode(true);
      np.id = `cashFlow-${i}`;
      // 修改当前克隆元素内的周期数字
      np.querySelector('.periodDiff').textContent = `${i} `;
      // 修改输入框的id，避免重复
      const input = np.querySelector('input');
      input.id = `diffCashFlow-${i}`;
      payment.append(np);
    }
  }
}
different.onclick = showDifferentType;

• 提前获取周期数并转为数字，避免循环中重复查询DOM，提升性能。
• 给每个输入框设置唯一的id（diffCashFlow-${i}），避免id重复问题。
• 使用textContent代替innerHTML修改文本内容，更安全高效。

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