Как выбрать новый добавленный элемент и отредактировать его?

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 от первого, так как он был найден при загрузке страницы.

Так, как я могу выбрать этот новый элемент?

Answer 1

Вы пытаетесь выбрать элемент, который не существует в DOM. Доступ к динамически добавленным элементам может быть получен несколькими способами, кроме того, у кого-то есть ответ, который добавляет прослушиватель событий к созданному элементу, который является надежным решением. Другим наиболее распространенным способом будет использование делегирования событий (если вы знакомы с jQuery, который будет $(parentElement).on('action', 'elementWeWantToWatch', function)) в Vanilla js, шаблон фактически такой же, найдите или создайте элемент контейнера для вашего динамического HTML, затем добавьте слушатель в этот контейнер. Внутри слушателя вы захотите убедиться, что цель совпадает с вашим динамическим выбором и будет выполнена, когда вы найдете совпадение.

В этом примере

При загрузке страницы инициируется прослушиватель событий для просмотра элемента контейнера. Слушатель следит за кликами по элементам с классом continueButton, а когда находит, удаляет элемент, по которому щелкнули, и добавляет новый элемент (счетчик должен показать, что отображается новый контент: D)

(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();
  }
})()

.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
}

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

Answer 2

Вы пытаетесь выбрать элемент до того, как он появится в DOM.

Вместо этого вам нужно запустить этот код в обработчике события click первого <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* атрибутами событий, которых следует избегать.