为何无法操作追加到DOM中的HTML提交按钮？

我在JavaScript代码中尝试向DOM中追加提交按钮，完成追加后，其他元素均可通过console.log打印并进行操作，唯独提交按钮无法实现。相关代码如下：

HTML代码 #

<html>
<head></head>
<body>
    <button id="new-character-btn">New Character</button>
    <div id="character-parent">
            <div id="character-div"></div>
    </div>
</body>
<script src="copy.js"></script>
</html>

JavaScript代码 #

let newCharacterBtn= document.querySelector("#new-character-btn");
console.log(newCharacterBtn);

let characterDiv=document.querySelector("#character-div");
console.log(characterDiv);

let charPar=document.querySelector("#character-parent")
console.log(charPar);

let incrementer=1;
console.log(incrementer);


//add an event listener to add character button to duplicate html and increment their classes.
newCharacterBtn.addEventListener("click",()=>{
console.log(incrementer)
console.log(characterDiv)

        characterDiv.innerHTML+=`
                <div class="iniative${incrementer}"></div>
                <button class="submit-btn${incrementer}">Submit</button><input class="character-input" type=number></input>
            `
            charPar.append(characterDiv)
            console.log(charPar)

        incrementer=incrementer+1
        console.log(incrementer)// log the increment value.

        let characterInput=document.querySelector(".character-input")
    console.log(characterInput) // log the first character input

    //  let submitBtn=document.querySelector(`#submit-btn${incrementer}`)
    //console.log(submitBtn) //log the all of the submitBtns 

        let iniativeDiv=document.querySelector(`.iniative${incrementer}`)

        let submitBtn=charPar.querySelector(`.submit-btn${incrementer}`)
        console.log(submitBtn)//my failed attempt to log out the submit button.
    });

排查思路及修复方案 #

• 变量增量时机错误，匹配了未创建的元素
  你在追加完元素后立刻执行incrementer = incrementer + 1，之后用新的增量值去查找按钮。比如第一次点击时，incrementer初始为1，创建的按钮类名是submit-btn1，但增量后变成2，此时用submit-btn2查找自然找不到。正确做法是先查找当前创建的按钮，再执行增量操作，或者查找时用incrementer - 1来匹配刚创建的元素。

• 重复追加同一DOM元素导致结构异常
  charPar.append(characterDiv)这行完全多余，因为characterDiv本来就是charPar的子元素，重复append会导致DOM结构混乱，干扰元素查找，直接删掉这行即可。

• 选择器匹配逻辑修正
  修复增量时机后，查找按钮的代码应该改为用当前未增量的incrementer值：

  // 先查找刚创建的按钮
  let submitBtn = charPar.querySelector(`.submit-btn${incrementer}`);
  console.log(submitBtn); // 现在能正常打印按钮元素
  // 再执行增量
  incrementer++;
  

• 可选优化：避免innerHTML重建DOM
  用innerHTML+=会每次重建characterDiv内的所有元素，后续如果给按钮绑定事件会失效。建议改用createElement创建元素再追加，示例：

  // 创建新的元素组
  let groupDiv = document.createElement('div');
  let initiativeDiv = document.createElement('div');
  initiativeDiv.className = `iniative${incrementer}`;
  let submitBtn = document.createElement('button');
  submitBtn.className = `submit-btn${incrementer}`;
  submitBtn.textContent = 'Submit';
  let input = document.createElement('input');
  input.className = 'character-input';
  input.type = 'number';
  
  // 组装元素
  groupDiv.appendChild(initiativeDiv);
  groupDiv.appendChild(submitBtn);
  groupDiv.appendChild(input);
  // 追加到characterDiv
  characterDiv.appendChild(groupDiv);
  
  // 直接操作刚创建的按钮，无需再查找
  console.log(submitBtn);
  incrementer++;
  

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