자바스크립트 동적 추가 요소 제어 방법 질문 드립니다!!

Copy

<input type="button" name="testin" value="테스트다!">
<div class="onthein"></div>

Copy

var testin = document.querySelector('input[name=testin]');
testin.addEventListener('click',function(event){

  var onthein = document.querySelector('.onthein');

  var othertest = document.querySelector('input[name=othertest]');

  if(!othertest){

    var addinput = '<input type="button" name="othertest" value="추가테스트!" class="addclass">';
    onthein.insertAdjacentHTML('beforeend',addinput);
  }

});

이렇게 해서 calss 값이 addclass 인 input 버튼을 동적으로 추가 해서 만들었습니다.

문제는 동적으로 추가 된 assclass 버튼에 이벤트를 넣고 싶은데 방법을 모르겠네요 ㅠㅠ

jQuery 에서는 간단하게

Copy

$(document).on('click','.addclass',function(){
  console.log('클릭 완료!!!');
})

이렇게 하면 되는데 jQuery 말고 자바스크립트로 표현하려면 어떻게 해야할까요??

구글링을 아무리 해도 나오지가 않네요 ㅠㅠㅠ

자바스크립트 동적 추가 요소 제어 방법 질문 드립니다!!

답변 1개

공유하기