개시하다

이번에는 innerHTML 속성과 textContent 속성의 차이점을 소개합니다.
두 속성 모두 JavaScript 요소의 텍스트에 액세스할 수 있습니다!
나는 항상 어느 것이 어느 것인지 모르기 때문에 여기서 총결산을 하자!

양자의 차이

● innerHTML

HTML 해석 및 내보내기는 innerHTML입니다.

● textContent

"textContentent는 HTML을 설명하지 않고 문자로 출력합니다."
다음은 코드의 예입니다!
test.html

<p id="p1">ボタンを押して下さい</p>
<input type="button" value="textContent" onclick="clickBtn1()">
<input type="button" value="innerhtml" onclick="clickBtn2()">

<script>
function clickBtn1(){
    const p1 = document.getElementById("p1");

    p1.textContent = "<b>ボタンを押しました</b>";
}
function clickBtn2(){
    const p1 = document.getElementById("p1");

    p1.innerHTML = "<b>ボタンを押しました</b>";
}
</script>

상기 코드는 단추를 눌렀을 때 innerHTML과 textContentent에서 각각 텍스트를 출력하는 기술입니다.
innerHTML 클릭 시
버튼 눌림
와 <b></b> 라벨이 반영되어 굵은 글자로 텍스트를 출력합니다!
textContentent를 클릭하면 HTML 태그를 읽을 수 없습니다.<b>ボタンを押しました</b>면 라벨도 바로 출력됩니다!
※ 아래 사이트는 이쪽 코드를 인용하였습니다!
이 사이트에서도 각 버튼을 눌렀을 때의 시범이 있다!꼭 보세요!
https://itsakura.com/js-textcontent-innerhtml

최후

innerHTML과 textContent의 차이점!
어느 것이 어느 것인지 몰랐던 상황에서 innerHTML의 문자의 의미를 고려하면 기억하기 쉽다.
내(內)inner 직역하면'HTML을 안에 넣는다'는 느낌이 든다.
즉 innerHTML는'HTML 태그 읽기'로 해석할 수 있다!
모르면 이렇게 하자!