자바스크립트 - innerHTML, removeChild, replaceChild

엘리멘트 내부를 변경할 수 있는 자바스크립트 속성 또는 메서드 입니다.

Element.innerHTML

• 메서드가 아니라 속성
• 값을 넣을 수 도있고 반환을 받을 수도 있는 속성
• 활용도가 높다.

element.innerHTML = 'Hello JavaScript';​

※ 주의사항

• innerHTML을 통해 내용을 삽입하면 document 객체가 이미 완성된 상태이기 때문에 삽입된 즉시 브라우저 해석에 들어간다
• 문장을 따로 따로 넣으면 안됨
• 명령어를 많이 이행하는 만큼 성능에도 좋지 않다. 명령을 최소화 하는 방법으로 바꿔야 한다.

안좋은 예 ❌

element.innerHTML += "Hello";
element.innerHTML += "world";

바른 예 ⭕

var content = "Hello";
content += "world";
element.innerHTML = content;

Element.removeChild

• 자식 객체 중에서 특정한 객체를 지정해 지울 수 있는 메서드

parent.removeChild(element);

Element.replaceChild(새 객체, 버릴 객체)

• 새로운 객체와 버릴 객체를 바꿈

parent.replaceChild(newEle, oldEle);