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

Question

我有一个 <a>元素:

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

当这个 anchor 被点击时，一个新的元素被添加:

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

第一个被点击的 anchor 被移除。

我想选择那个新元素。

我试过:

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

我正在使用 ('continueButton')[1] , 因为还有一个 input在该 anchor 之前具有相同的类。

但我肯定会得到 Click To Add从第一个开始，因为这是在加载页面时发现的。

那么我该如何选择那个新元素呢？

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*应避免的事件属性。