annyhpk.log

Javascript

insertAdjacentHTML 과 innerHTML 차이 알아보기

1. innerHTML 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 그리고 MDN 문서에 이렇게 표기되있다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오. 2. insertAdjacentHTML insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱 하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용 중인 element는 다시 파싱 하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므..

Javascript

addEventListener 와 onclick

결론 부터 말하자면 addEventListener가 더 나은 방식입니다. addEventListener를 사용하세요. 두 개의 메소드는 아래와 같이 사용합니다. document.querySelector('.btn').onclick = () => { alert('click!'); } document.quertSelector('.btn').addEventListener('click', () => { alert('click!'); ), false); 1. 여러 이벤트 overwrite onclick는 한번에 하나의 이벤트만 할당할 수 있습니다. 그에 반해 addEventListener는 여러개의 이벤트를 overwrite할 수 있습니다. 아래의 예시를 봅시다. let eventHandler1 = () => {..