DEVLOG
엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML 본문
엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML
meroriiDev 2020. 12. 11. 11:21jQuery의 .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에서도 지원이 된다고 하니 자주 만나게 될 것 같다:)
자세한 설명은 여기!
'frontend > javascript' 카테고리의 다른 글
익스플로러에서 includes함수가 동작하지 않는다면? (2) | 2021.01.19 |
---|---|
[SheetJS] javascript로 테이블을 엑셀파일로 다운로드하기 (5) | 2021.01.13 |
페이지 로드 후 실행하기 (window.onload, document.ready) / document.ready를 순수자바스크립트로! (DOMContentLoaded) (0) | 2020.12.11 |
JS의 다양한 메소드를 만나보자 (2) forEach()/find()/findIndex()/includes()/indexOf()/sort()/replace()/join()/substring()/split() (0) | 2020.12.08 |
[AJAX] $.ajax()메소드와 옵션 (0) | 2020.12.02 |