innerHTML이란? html 또는 xml을 읽어오거나 설정 가능하며 ,
textContetn 이란?가지고 있는 텍스트 값을 그대로 가져옵니다. 아래 예제를 통해 알아보겠습니다.
출력 화면
소스코드 <body>
<input type = "button" value = "id 검색" onclick="viewTag()"/>
<h1 id = "h1" class="c1" > h1 tag </h2>
<div id ="d1">
<b>hello Div</b>
</div>
</body>
h1 이라는 id에 접근해서 innerHTML 메서드와 textContetn 메서드를 적용
소스 코드 <script>
const viewTag = function() {
let h1 = document.getElementById("h1");
console.log(h1.innerHTML);
console.log(h1.textContent);
}
</script>
출력
d1 이라는 id에 접근해서 innerHTML 메서드와 textContetn 메서드를 적용
소스 코드 <script>
const viewTag = function() {
let d1 = document.getElementById("d1");
console.log(d1.innerHTML);
console.log(d1.textContent);
}
</script>
출력
예제를 통해 innerHTML 메서드와 textContetn 메서드에 차이를 알 수 있습니다. innerHTML메서드의 경우는 HTML에 기술된 텍스트와 태그까지 출력 textContetn메서드의 경우 기술된 텍스트만 출력
예제를 통해 더 알아보겠습니다.
아래와 같이 두개의 버튼이 있다고 가정 해보겠습니다.
<body>
<input type = "button" value = "태그추가" onclick="addTag()"/>
<input type = "button" value = "태그삭제" onclick="deleteTag()"/>
<div id ="d2"></div>
</body>
그렇다면, div태그의 id인 d2로 접근해서 innerHTML 메서드와 textContent 메서드를 적용 해보겠습니다.
innerHTML 메서드 적용시 <script>
const addTag = function() {
let d2 = document.getElementById( "d2" );
d2.innerHTML = '<b>hello div</b>';
}
</script>
textContent 메서드 적용시 <script>
const addTag = function() {
let d2 = document.getElementById( "d2" );
d2.textContent = '<b>hello div</b>';
}
</script>
태그 삭제 버튼을 구현해보겠습니다.
innerHTML 메서드 적용시 <script>
const deleteTag = function() {
let d2 = document.getElementById( "d2" );
d2.innerHTML = '<b>삭제되었습니다.</br>';
}
</script>
textContent메서드 적용시 <script>
const deleteTag = function() {
let d2 = document.getElementById( "d2" );
d2.textContent = '<b>삭제되었습니다.</br>';
}
</script>
댓글