Question

我有一个<a>元素：

<a id='addNewElementk' onclick='//Some Js Code' class='continueButton'>Click To Add</a>

单击此锚点时，添加了一个新元素：

<a href="" class="continueButton">New Added Element</a>

点击的第一个锚被移除。

我想选择那个新元素。

我试过了：

window.onload = function(){
    var newElem = document.getElementsByClassName('continueButton')[1];
    alert(newElem.innerHTML);
}

我使用('continueButton')[1]，因为在该锚点之前还有另一个input具有相同的类。

但是我肯定会从第一个获得Click To Add，因为在页面加载时找到了$diskinfo。

那么如何选择新元素？

Answer 1

您尝试在DOM中存在之前选择该元素。

您需要在第一个<a>的点击事件处理程序中运行该代码，如下所示：

window.onload = function() {
  document.querySelector('#addNewElementk').addEventListener('click', function(e) {
    e.preventDefault();
    var a = document.createElement('a');
    a.textContent = 'New Added Element';
    a.href = '#';
    a.classList.add('continueButton');
    a.addEventListener('click', function(e) {
      console.log(a.innerHTML);
    });    
    
    this.parentNode.insertBefore(a, this);
    this.remove();
  });
}

<a id='addNewElementk' href="#" class='continueButton'>Click To Add</a>

请注意addEventListener()使用过时的on*事件属性，应该避免使用。

Answer 2

您正在尝试选择DOM中不存在的元素。动态添加的元素可以通过几种方式访问，上面有人有一个答案，它将事件监听器添加到创建的元素，这是一个可靠的解决方案。另一种最常见的方式是使用事件委托（如果你熟悉jQuery，它将是$(parentElement).on('action', 'elementWeWantToWatch', function)）在Vanilla js中，模式实际上是相同的，为你的动态html找到或创建一个容器元素，然后添加该容器的监听器。在侦听器内部，您需要确保目标匹配您的动态选择，并在找到匹配项时执行。

在此示例中

在页面加载时启动事件侦听器以观察容器元素。监听器监视具有continueButton类的元素的点击，当它找到一个时，它删除被点击的元素并添加一个新元素（计数器用于演示正在显示新内容：D）

＆＃13;

(function() {
  let i = 1;
  const makeButton = () => {
    const a = document.createElement('a');
    a.classList.add('continueButton');
    a.href = '#';
    a.textContent = `Button ${i}`
    i++;
    return a;
  }
  
  const init = () => {
    const container = document.querySelector('.test');
    container.addEventListener('click', e => { 
      if (e.target.classList.contains('continueButton')) {
        let button = makeButton();
        container.appendChild(button);
        container.removeChild(e.target);
        return;
      }
    });
  };
  
  if (document.readyState == 'loading') {
    window.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})()

＆＃13;

.test {
  width: 100%;
  display: block;
  text-align: center;
}

.continueButton {
  display: block;
  color: white;
  background-color: green;
  border-radius 2px;
  padding: 15px 30px;
  line-height: 2;
  margin: 50px auto;
  width: 200px;
  text-decoration: none
}

＆＃13;

<section class="test">
  <a id='addNewElementk' class='continueButton'>Click To Add</a>
</section>

＆＃13;

如何选择新添加的元素并进行编辑？

2 个答案:

在此示例中