如何选择点击锚点后动态新增的DOM元素并编辑？

你的问题核心在于时机不匹配——window.onload只会在页面初始加载完成时执行一次，这时候你还没点击第一个锚点，新增的元素根本不存在！此时document.getElementsByClassName('continueButton')返回的集合里只有初始的那个按钮，索引[1]自然是undefined，alert肯定会报错。

下面给你两种可行的解决思路：

方案一：在点击事件内直接操作新增元素 #

如果可以修改原来的点击事件代码，这是最直接的方式——因为新增元素的操作是在点击事件里触发的，你可以在创建完新元素后直接获取并操作它：

// 先获取初始的按钮元素
const addButton = document.getElementById('addNewElementk');
addButton.onclick = function() {
  // 1. 移除当前点击的按钮
  this.remove();
  
  // 2. 创建新元素并设置属性
  const newElem = document.createElement('a');
  newElem.href = "";
  newElem.className = "continueButton";
  newElem.textContent = "New Added Element";
  
  // 3. 将新元素添加到页面（这里假设添加到body，你可以改成实际的父容器）
  document.body.appendChild(newElem);
  
  // 4. 直接操作新元素
  alert(newElem.innerHTML);
};

方案二：用MutationObserver监听DOM变化（适用于无法修改原点击事件的场景） #

如果原点击事件是第三方脚本写的，你没法直接修改，那可以用MutationObserver来监听DOM的变化，当新元素被添加到页面时自动触发操作：

window.onload = function() {
  // 选择新元素会被添加到的父容器（尽量精确，避免不必要的监听）
  const targetContainer = document.body;
  
  // 配置监听规则：监听子节点的添加/移除
  const observerConfig = { childList: true, subtree: true };
  
  // 监听触发后的回调函数
  const handleDomChange = (mutations) => {
    mutations.forEach(mutation => {
      // 遍历所有新增的节点
      mutation.addedNodes.forEach(node => {
        // 检查是不是我们要找的元素
        if (node.nodeType === 1 && node.classList.contains('continueButton')) {
          alert(node.innerHTML);
          // 找到目标元素后可以停止监听，避免重复触发
          observer.disconnect();
        }
      });
    });
  };
  
  // 创建并启动监听实例
  const observer = new MutationObserver(handleDomChange);
  observer.observe(targetContainer, observerConfig);
};

额外提醒 #

• getElementsByClassName返回的是动态集合，但你的原代码只在window.onload执行一次，所以即便之后DOM变化了，也不会重新获取新的元素。
• 尽量避免用索引（比如[1]）来获取元素，一旦页面结构变化，索引很容易失效，用类名或其他属性配合监听的方式更可靠。

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