innerHTML outerHTML

innerHTML프로퍼티를 사용하면 요소노드안의 HTML을 문자열형태로 받아올 수 있고 요소노드안 HTML을 수정하는 것도 가능하다.

document.body.innerHTML = '<b>test'; // 자동수정

let div = document.querySelector('div');
let btn = document.querySelector('button');
div.innerHTML = '<script>function a(){alert(1)}</script>'; 
btn?.addEventListener('click',()=>{
  a();
});

< script >태그를 innerHTML로 넣으면 브라우저가 script태그를 해석하지 않기때문에 식별자로 인식되지 않는다.

innerHTML 주의사항

chatDiv.innerHTML += "<div>안녕하세요<img src='smile.gif'/> !</div>";
chatDiv.innerHTML += "잘 지내죠?";

elem.innerHTML += "...";
// 위 코드는 아래 코드의 축약 버전입니다.
elem.innerHTML = elem.innerHTML + "..."

요소노드에 내용을 추가하는 것처럼 보이지만 실제로는 위와같이 내용을 삭제후 다시 삽입하는 것이기때문에 컨텐츠를 다시 로딩해야 한다.

outerHTML

<div id="elem">Hello <b>World</b></div>

<script>
  alert(elem.outerHTML); // <div id="elem">Hello <b>World</b></div>
</script>

outerHTML 주의사항

<div>Hello, world!</div>

<script>
  let div = document.querySelector('div');

  // div.outerHTML를 사용해 <p>...</p>로 교체
  div.outerHTML = '<p>새로운 요소</p>'; // (*)

  // 어! div가 그대로네요!
  alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>

div.outerHTML = '< p >새로운 요소< /p >'
1. document에서 div요소노드가 제거된다.
2. '< p >새로운 요소< /p >'가 제거된 노드에 삽입된다.
3. 브라우저는 랜더링한다.

div = null;구문이 있어 수행된다면 div는 기존의 div element를 참조하지 않게 되겠지만 그런 구문이 없기때문에 div 계속 div element를 참조하고 있는 것이다.

innerHTML은 구문이 수행되면서 요소노드의 내용이 변경되지만 outerHTML은 구문이 수행되어도 요소노드의 내용을 변경하지 않지 않는다.

'< p >새로운 요소< /p >'를 참조하려면 탐색을 새롭게 해야 한다.