[javascript] inner/outerHTML, textContent 비교

 

1. element.innerHTML

요소 노드 내부의 html 코드를 문자열로 리턴해 준다, 내부에 있는 행갈이나 들여쓰기 모두 포함하여.

> 요소 안의 정보를 확인할 수도 있지만 내부의 html 자체를 수정할 때 자주 활용된다. 

(내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!)

콘솔에서 요소 노드 내부를 출력함. 리스트 항목들이 나옴.

 

콘솔에서 innerHTML로 노드 내부 내용을 새로운 값으로 할당해 줌.

 

 

2. element.outerHTML

요소 노드 자체의 전체적인 html 코드를 리턴해 준다. inner와 마찬가지로 행갈이, 들여쓰기 모두 포함이다.

(새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의!)

콘솔에서 출력했을 때 inner와 다르게 <ul> 태그까지 출력된 것을 볼 수 있다.

 

콘솔에서 outer로 mytag에 새로운 값을 할당해 주니 element의 ul이 새로운 ul로 교체되었다.

 

 

3. element.textContent

요소 내부 내용들 중 html 태그를 제외한 테스트만 출력. 마찬가지로 행갈이, 들여쓰기 포함.

> innerHTML처럼 노드 내부의 값에 새로운 값을 할당해 주는 역할을 하는데 텍스트만 다루기 때문에 특수문자도 모두 텍스트로 취급한다. 즉, 위의 사진에서 mytag에 outer를 사용하여 <ul> 리스트를 만들어 줄 때 만약 textContent를 사용했다면 웹페이지 화면에 <ul> 태그까지 출력해버린다는 것이다.

 

 

 

출처: 코드잇