innerHTML 은 요소의 자식들만 가져옴.
outerHTML 은 요소 자체를 가져옴.
textcontent 는 innerHTML 과 비슷하지만 태그를 문자로 인식하여 가져옴.
엘리먼트의 innerHTML 요소
1 | var content = element.innerHTML; | cs |
엘리먼트가 <div><input></div> 일 경우, <input> 을 가져옴.
content 변수는
content = "<input>";
처럼 되는 것.
그렇다면 요소 안에 값을 넣을때는?
1 | element.innerHTML = content; | cs |
간단하다.
이걸 응용해서 예를들면 body태그에 적용시킬 수 있다.
1 | document.body.innerHTML = ""; | cs |
이렇게 하면 body태그 안에있는 모든 요소가 사라져버린다.
하지만 innerHTML은 보안문제를 일으킬 가능성이 있다. innerHTML은 자바스크립트 태그를 읽지는 못하지만, 태그 안에 요소로서 가져올수는 있는데 그 예제가 바로 오른쪽의 링크에 있다. innerHTML의 보안문제
물론 innerHTML로 인해 발생하는 보안문제를 겪기는 꽤 드물다. 그래도 기능의 동작이 아닌 순수한 텍스트만을 나타내고 싶을때는 textContent를 사용하도록 해야한다. 둘중 어느걸 사용한다고 해서 성능이 더 빠르고 그딴건 없다.
엘리먼트의 textContent 요소
textContent는 innerHTML과 크게 다르지 않다.
위에서 언급했던 것 처럼 textContent의 다른 점은 불러온 텍스트 요소를 기능하지 않는다는 것이었다.
1 2 | document.body.innerHTML = "<input>"; document.body.textContent = "<input>"; | cs |
이 스크립트를 실행시킬 경우, innerHTML를 적용시킨 1행에서는 input태그가 정상적으로 나타나지만, textContent를 적용시킨 2행에서는 그저 텍스트로 <input>이라는 글자만 나타날 뿐이다.
엘리먼트의 outerHTML 요소들을 가져오기
innerHTML과 outerHTML의 차이는 태그와 함께 가져오느냐, 태그의 요소를 가져오느냐의 차이이다.
1 2 3 4 5 6 7 8 9 10 | /* <body> <div class="b">Hi !</div> </body> */ var el = document.getElementsByClassName("b")[0]; // 엘리먼트 (Element) var a = el.innerHTML; // Hi ! var b = el.outerHTML; // <div class="b">Hi !</div> | cs |
이렇게 innerHTML과 outerHTML은 자바스크립트에서 기본중의 기본에 속하고, 이를 알아야 엘리먼트를 수월하게 변경할 수 있다.
하지만 outer의 큰 단점이 하나 있다. 부모 엘리먼트가 없을 경우 outerHTML이 통하지 않는다.
이에 대한 예제는 오른쪽 링크를 타고 들어가보도록 하자. 부모 없는 outerHTML
outerHTML은 내가 쓰고있는 코딩 툴인 Bracket에서 Ctrl + Space를 했을 때 목록에 존재하지 않는 허점(?)이 있다. 이는 패키지를 따로 다운받거나 플러그인을 내려받으면 되겠지만 귀찮다.
