엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML

jQuery의 .append()를 아시나요..? 제가 참 좋아하는데요 ㅠ,ㅠ

jQuery가 점점 줄어들고 순수자바스크립트의 중요성이 강해지면서 자바스크립트를 이용하는 방법을 알아볼까나요!

 

그 전에... append는 요소를 추가하는건데 왜 텍스트변경하는걸 알아보는거지?라고 생각할 수도 있는데

append()는 JS에서 '태그생성+내부텍스트변경+부모요소 밑으로 태그추가' 단계를 한번에 수행할 수 있도록 만들어준 jQuery문법이다.

그렇기 때문에 이를 순수자바스크립트로 구현하려면 이 세단계를 다 알아야한다는 뜻!

 

var a = document.createElement("div"); //1. 태그 생성
/****2. 텍스트추가****/
document.querySelector("부모요소").appendChild(a);	//3. 부모 밑으로 태그 추가

그 중에서 이번에는 태그의 텍스트를 변경하는 다양한 방법에 대해 알아보려고 한다!

모든 예시에서 1.태그생성과 3.부모밑으로 태그 추가 코드는 생략하겠습니다

---

createTextNode

먼저 textNode를 생성하여 태그가 이 텍스트를를 감싸도록 하는 방법이다.

var aText = document.createTextNode("text"); 
a.appendChild(aText);

텍스트를 생성할때는 createTextNode를 사용하고,

부모 밑으로 들어갈때는 appendChild를 사용한다.

보안이고 속도고 이런건 잘 모르겠지만 개인적으로 이해가 잘되는 구조라고 생각한다....

하지만 어찌됐든 코드가 두줄로 길어지기 때문에 또 다른 방법이 어떤게 있나~~~ 여기저기 찾아다녀보자~~

 

난 그동안 이 방법을 주로 사용해왔는데

결론부터 말하자면 이 글이 끝나고나면 내 마음이 바뀔거라는거 :)

 

 

innerHTML

var a = element.innerHTML;	//요소의 값을 가져올 때

element.innerHTMl = "~~~"; //요소안에 값을 넣을때

많은 사람들이 이 방법을 알고 있고, 또 쓰고있을테지만 그닥 추천하지는 않는 방법이다.

큰 차이는 아니지만 상대적으로 다른 방법들에 비해 파싱이 느리고

가장 큰 문제는 보안에 취약하다는 점이다. (이에 대한 자세한 내용은 여기서 확인해볼 수 있다.)

 

물론 innerHTMl을 사용했다고해서 발생하는 보안문제를 겪는 것은 꽤 드물다.

그래도 기능의 동작이 아닌 순수한 텍스트만을 나타내고 싶을때는 textContent를 사용하도록 하자.

 

textContent

document.body.innerHTML = "~~~";
document.body.textContent = "~~~";

...이거다 이거야...

사실 textContent와 innerHTML은 느껴지기에는 크게 다르지 않다.

그렇지만 성능과 보안에 강점이 있고, raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있다는 장점이 있다.

사실 다른건 잘 모르겠고 깔끔하게 한줄로 쓸 수 있다는것이 너무 매력적인데 성능이나 보안에 장점이 있다고하니

더더더 매력적으로 보이지!!

 

이 외에도 innerText라는 방법도 있지만 innerText는 IE환경에 적합하게 나온 방법이라 그냥 textContent를 사용하는게 좋을 것 같다~~

 

 

insertAdjacentHTML()

Element.insertAdjacentHTML(place, text);

이 외에 jQuery와 똑같이 사용할 수 있는 메소드도 있다. 바로 insertAdjacentHTML()이라는 것인데

여러개의 태그를 줄줄줄줄줄 써놓고 append!하면 간단했었는데

위에서 공부해본 것들로 하려니.. 코드가 엄청나게 길어지는 경험을 할 것이다.

그럴때 append대신 insertAdjacentHTML을 사용해서 append처럼 한줄로 딱! 삽입할 수 있다.

게다가 ie에서도 지원이 된다고 하니 자주 만나게 될 것 같다:)

자세한 설명은 여기!

 

 

 

velog.io/@raram2/%EB%8B%B9%EC%8B%A0%EC%9D%B4-innerHTML%EC%9D%84-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

당신이 innerHTML을 쓰면 안되는 이유