[브라우저와 자바스크립트] 11. 요소 노드 추가하기

const today = document.querySelector('#today');

today.innerHTML = '<li>처음</li>' + today.innerHTML;
today.innerHTML = today.innerHTML + '<li>마지막</li>'

today.outerHTML = '<P>이전</P>' + today.outerHTML;

const newToday = document.querySelector('#today');
newToday.outerHTML = newToday.outerHTML + '<P>다음</P>';

innerHTML과 outerHTML을 활용하면 문자열로 요소를 만들어서 태그 안쪽에 처음이나 마지막 아니면 태그 자체의 앞이나 뒤에 자유롭게 HTML 태그를 추가할 수가 있습니다. 그런데 innerHTML이나 outerHTML 프로퍼티를 활용하게 되면 기존의 내용을 덮어쓰는 방식으로 동작하기 때문에 기존 내용을 보존하려면 기존의 값을 한 번 더 활용해야되고 잘못하면 말 그대로 내용을 덮어써버려서 기존 데이터가 사라져버리는 그런 상황이 발생할 수도 있습니다.

 

더군다나 outerHTML의 경우에는 한번 프로퍼티를 수정하게 되면 완전히 새로운 요소가 되어 버려서 그 이후에 그요소를 다루려면 새롭게 다시 그 요소를 찾아야하는 문제도 생깁니다.

// 요소 노드 추가하기
const tomorrow = document.querySelector('#tomorrow');

// 1. 요소 노드 만들기: document.createElement('태그이름')
const first = document.createElement('li');

// 2. 요소 노드 꾸미기: textContent, innerHTML, ...
first.textContent = '처음'

// 3. 요소 노드 추가하기: NODE.prepend, append, after, before
tomorrow.prepend(first);

이런 문제를 해결하기 위해서 기존의 문서 구조를 덮어쓰는 방식이 아니라 요소 노드를 직접 생성해서 그 요소만 필요한 곳에 추가하는 방법을 살펴보겠습니다. 세단계로 나누어서 보면 이해하기 쉬운데요.

가장 첫 번째는 요소 노드를 만드는 겁니다.

document 객체의 createElement라는 메소드를 활용하면 원하는 태그 이름으로 요소 노드를 만들 수가 있는데요.

오늘 할 일의 처음이라는 부분을 내일 할 일에도 만들어 볼 거라서 li태그로 만들어줬고 변수 이름도 내일 할 일의 첫 번째 요소로 들어갈 거라서 first로 만들어줬습니다.

다음으로는 이렇게 만들어진 요소 노드를 꾸며주는 일인데요. 지금은 그냥 처음이라는 문자만 넣어줄 거니까 textContent를 활용했지만 내부에 간단한 HTML 태그가 필요하다면 innerHTML을 사용해도 됩니다. 이러면 내부에 처음이라는 글자를 담고 있는 li 태그가 모두 완성된 건데요.

이렇게 만들어진 태그를 어딘가 넣어줘야 화면에 반영이 되는데 prepend라는 메소드를 이용하면 메소드를 호출한 노드의 제일 첫 번째 노드로 파라미터로 전달할 값을 추가할 수가 있습니다. 

 

이렇게 코드를 저장하고 실행해보면 내일 할 일에도 처음이라는 li 태그가 추가된 걸 확인할 수 있습니다.

 

이렇게 세 단계로 나눠서 나머지 부분도 작성해보면 이런 식으로 작성할 수가 있는데요.

const last = document.createElement('li');
last.textContent = '마지막';
tomorrow.append(last);

const prev = document.createElement('p');
prev.textContent = '이전';
tomorrow.before(prev);

const next = document.createElement('p');
next.textContent = '다음';
tomorrow.after(last);

코드를 저장하고 실행해보면 append 메소드는 파라미터로 전달한 값을 메소드를 호출한 노드의 제일 마지막 자식 노드로 

그리고 before와 after는 이름에서도 유추할 수 있듯이 메소드를 호출한 노드의 앞쪽과 뒤쪽에 파라미터로 전달한 값을 형제 노드로 추가해 줍니다. 그리고 이 메소드들은 꼭 요소 노드를 추가할 때만 사용되는 것이 아니라 파라미터로 그냥 문자열을 전달해도 저장하고 실행해보면 이렇게 자동으로 텍스트 노드가 생성이 되어서 추가되는 걸 확인할 수가 있습니다.

 

또 이 메소드들을 호출하는 때 여러 개의 값을 전달하면 전달한 순서대로 노드를 한 번에 추가할 수도 있으니까 필요에 따라서 유용하게 활용하면 좋을 것 같습니다.

 

한 가지 조심해야 될 부분은 이 prepend나 before의 경우에는 요소를 앞으로 추가하기 때문에 여러 개의 값을 전달하게 되면 하나씩 앞으로 추가하면서 역순으로 추가될 거라는 오해를 하는 경우가 종종 있는데요.

전달한 순서 그대로 파라미터를 한 번에 해당 위치에 추가한다는 점도 기억해두면 좋을 것 같습니다.