Setting InnerHTML and textContent (Video Version)

우린 이미 'innerHTML'에 대해서 꽤나 많이 사용해 왔습니다.

여기에 대해서 빠르게 조금더 보여드리겠습니다

먼저, 여기 'innerHTML'을 사용한 예제를 봅시다.

저는 여기에 "all about cats" 라는 string함수를 통해 적어주었습니다.

하지만, 사실 이 string 함수에 HTML 테그를 넣을수 있습니다

그러므로 여기 "cat" 부분을 ''테그를 통해 넣을수있고

보시다 시피 강조된것으로 볼수 있습니다.

혹은 이 아래에 "dog"를 "cat"으로 변환시킨 부분에

''테그를 쓸수 있습니다.

그리고 이는 크고 두껍게 나타납니다.

또한 ''테그를 넣어서, 혹은 전체 웹페이지의 HTML 을 이곳에 넣어서

사용할수 있습니다. 정말로 필요한 작업이라면 말이죠.

꽤나 괜찮아 보입니다. 왜냐하면 이는 'innerHTML'로 많은것을 할수 있다는 뜻이기 때문입니다.

만약, 문자만을 바꾼다면 'innerHTML'을 사용할 필요는 없습니다.

우리는 단지 ''textContent'속성만으로 사용할수 있습니다. 그리고 그 말은

HTML로 쓴것을 브라우저가 인식하지 못하고 단지 일반문자로 만들어주는 것입니다.

만일 위를 'testContent'로 바꾼다면

이 괄호들은 더러워 보이게 됩니다!

그러므로, 이경우에는, 단지 제거해주어야 합니다. 왜냐하면 브라우저가

실제 HTML로 변화시키는것을 거부하기 때문입니다.

그러므로 만일 text만을 사용하고 싶으시다면 "textContent'를 사용하시면 됩니다.

만일 HTML테그나 HTML로 해석되는것 적길 원하신다면

'innerHTML'을 사용하시면 됩니다.

DOM 에 대해 더 진보되서 시작하고 싶다면

'innerHTML'과 'textContent'를 사용하는데 좀더 신경써야 합니다.

왜냐하면 이들이 또한 요소 내부에 적어둔event listeners를

제거하기 때문입니다.

이는 곧 배우게 될 예정입니다.

다음시간에는 더 정교한 방식을 보여드리도록 하겠습니다.