[Javascript] createElement VS innerHTML

개발을 한참 즐겁게 하는 친구가 던진 질문에 찾아본 내용은 위와 같다.

본래 리액트 및 타입스크립트를 즐겨하던 친구라 그 친구랑 이야기를 하려고 필자는 기초수준의 npm 을 연습수준으로만 해본적이 있다.

친구의 재미있는 질문은 다음과 같다.

​

a 태그에 이벤트를 주는 가장 좋은 방법이 뭘까?

1.

<a href="javascrip:function();"></a>

2.

<a href="#!" onclick="function()"></a>

3.

<a href="#!" id="a1"></a>
...(중략)...
var a1 = document.querySelector("a1");
a1.addEventListener('click', ()=>{function1();function2();});

물론 친구는 위와 같이 보기를 주고는 자신은 대뜸 createElement 로 a 태그를 만든다고 소개했다.

새롭게 생성한 a 태그에 이벤트를 붙여준뒤 원하는 위치에 붙여준다는 식이었다.

​

사실 무엇이 더 좋고 바른지 필자는 알수 없지만, 분명한 것은 동일한 페이지 내에서는 한가지 방식만을 고수하여 주기를 바란다.(추후 인계자를 위해 조금만 배려심 있는 개발자가 되면 좋겠다.)