innerHTML
const content = element.innerHTML;
element.innerHTML = htmlString;Element 속성의 innerHTML은 요소 내에 포함 된 HTML 혹은 XML 마크업을 가져오거나 설정한다.
let contents = myElement.innerHTML;이렇게 하면 요소의 컨텐츠 노드에 대한 HTML마크업을 볼 수 있다.
또한 마크업을 직접 수정이 가능하다.
document.body.innerHTML = "";이 코드는 body태그의 내부의 모든 내용을 지울 수 있다.
appendChild
Node.appendChild()는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있으면 appendChild()는 노드를 현재 위치에서 새로운 위치로 이동시킨다.
이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미한다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동한다.
var aChild = element.appendChild(achild);이동한 자식 노드를 반환한다.
appendChild vs innerHTML
- innerHTML: DOM객체의 Property, 교체
- appendChild: Method, 추가
innerHTML이 appendChild보다 2배 가량 빠르다고 한다. 벤치마킹 결과라고 하는데 어디서 벤치마킹한 것인지는 아직 확인 못해봤다.
innerHTML의 주의 사항으로는 완전한 문자열을 만든 뒤에 할당해야한다.
이번 개인과제를 시작하면서 appendChild와 innerHTML의 사용에 대한 고민이 생겼다. 어떠한 상황에서 무엇을 써야 적절히 사용하는 것인지 이번 과제를 하면서 계속 고민해 볼 것 같다.
출처:
프론트가 하고싶어요