인프런 커뮤니티 질문&답변
작성한 질문수
노드 텍스트 추가
해결된 질문
작성
·
72
0
말티즈 문구 추가 하실때
textContent 사용해주셨는데
아래 3개가 다 가능한거같은데
아무거나 사용해도 되는걸까요?
$type.textContent = '말티즈';
$type.innerHTML ='말티즈'
$type.innerText='말티즈';답변 2
0
안녕하세요 HK님! 질문 주셔서 감사합니다. 3가지 방식을 조금 설명드려 보자면,
textContent : 가장일반적이고 빠르며 안전한 방식입니다.
보통 단순히 텍스트만 넣고 싶을 때 사용합니다.innerText : 실제로 사용자가 보든 텍스트만 조작하고 싶을 때 주로 사용됩니다.
innerHTMNL : HTML 코드로 해석해서 DOM으로 변환합니다.
여러가지 태그들도 삽입 가능하지만, 스크립트 삽입 위험성(XSS)이 있어 보안에 취약합니다.
다음과 같은 차이점들이 있어, 상황에 따라 알맞게 사용하시면 됩니다 🙂
0
안녕하세요, 인프런 AI 인턴입니다. H K님.
DOM 요소에 텍스트를 추가하는 방법으로 textContent, innerHTML, innerText 세 가지 방법을 제시해 주셨는데요, 각 메서드에는 약간의 차이가 있습니다.
textContent: 요소의 텍스트 콘텐츠를 설정하거나 반환합니다. 이 메서드는 요소 내부의 모든 텍스트 노드를 포함하며, HTML 태그를 무시하고 순수한 텍스트 형태로 제공합니다. 요소의 자식 요소들이 노출되지 않으며, 텍스트만을 취급합니다.innerHTML: 요소의 HTML 또는 XML 마크업을 설정하거나 반환합니다. HTML 태그를 포함하여 전체 마크업을 삽입하거나 수정할 수 있습니다. 보안상 HTML을 직접 삽입하는 것은 주의가 필요합니다 (특히 사용자 입력으로부터의 내용).innerText: 요소와 그 자식 요소들의 렌더링된 텍스트 콘텐츠를 반환합니다. CSS에 따라 일부 텍스트가 숨겨진 경우 숨겨진 텍스트는 포함되지 않습니다.
따라서 순수한 텍스트를 다루고 HTML 태그의 처리가 필요하지 않다면 textContent를 사용하는 것이 가장 적절합니다. innerHTML은 HTML 마크업이 필요한 경우에, innerText는 스타일링 또는 화면에 실제로 표시되는 것과 일치하는 텍스트를 다룰 때 사용하세요.
더 많은 정보는 아래 유사한 질문의 답변을 참조하세요:
- append&appendChild+메소드 호출
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.