innerHTML vs element

const section = document.querySelector('section');
const h2 = document.createElement('h2');
h2.textContent = 'This is a title';
h2.setAttribute('class','title);
const h3 = document.querySelector('h3');
section.insertBefore(h2,h3);
// Element 를 이용한 DOM 조작

section.innerHTML = `
    <img src="img/test.png" alt="test" />
    <h1 id="brand">test </h1>
`;
// innerHTML을 이용한 DOM 조작

위와 같이 Element를 이용하여 DOM 을 조작할 수도 있고, innerHTML을 이용하여 DOM을 조작할 수 있다.

innerHTML을 이용하여 DOM을 조작하면, 상황에 따라 안에 텍스트만 변경될때마다 전체적인 html을 계속해서 업데이트하면서 layout print과정이 일어나기 때문에, 효율이 좋지 않을 수 있다.

단, 한번 업데이트한 다음에, 다시는 변경할 일이 없다면 innerHTML을 이용하는것도 괜찮다.

그래서 부분적인 요소(텍스트 변경 등)를 변경해야하는 경우에는 Element를 이용하는 것이 효율적이다.

또 Element 를 이용하게되면, 레퍼런스를 가지고 있기 때문에 removeChild(), appendChild() 등 많은 웹 API를 이용할 수 있기 때문에 조금 더 많은 동작을 할 수 있다.