textContent, innerText, innerHTML의 차이(2020년 확인판)

8664 단어 초보자자바스크립트금과

업데이트 정보



▼ 2020/05/18
내용을 다시 확인하고 업데이트했습니다.
새로 Safari와 Edge를 추가했습니다.

소개



JS에서 HTML을 다시 작성할 때,
  • DOM.textContent
  • DOM.innerText
  • DOM.innerHTML

    • 등을 사용하여 다시 작성하지만 この3つの違いって何だろう...?이 되었으므로 실제로 콘솔에서 시도해 차이를 확인했습니다. 이 기사는 그 메모입니다.

    왜 조사했는가


    今どきググればすぐ出てくるはず！！
    라든지 생각하고 있었습니다만, 아무래도 써 있는 것이 기사에 의해 흩어져 곤란했습니다.
    제일 많은 차이의 이유로서 対応ブラウザ※ 을 들 수 있었습니다만, 분명히 그것은 2020년에서는 낡은 ​​정보가 많은 생각이 들었습니다.
    분명한 다른 이유가 구구라고 해도 나오지 않았기 때문에 스스로 조사 버려! 그건 놀랍습니다.

    ※ IE라면 textContent을 사용할 수 없다/Firefox라면 innerText을 사용할 수 없다, 등이라고 쓰여진 기사도 있었지만, 이번 결과과는 달랐습니다.

    결과



    우선 결과에서! ! (자세한 검증 방법은 아래에 기재되어 있습니다)

    결론부터 말하면ブラウザが違うことによる(見た目的な)動作の違いはなかった입니다. Chrome이나 Firefox와 같은 움직임을 했습니다.

    그러나textContent / innerText / innerHTML の動きによる違いはある이었다.
  • 일반 텍스트
  • 줄 바꿈 텍스트( \n )
  • 취소선 HTML 있음 텍스트( <s></s> )

    • 의 3 패턴으로 검증한 결과,

  • textContent
  • 특히 아무것도 없음(가장 보통)


  • innerText
  • \n 에서 실제로 개행되는 것은 이만큼


  • innerHTML
  • <s></s>이 움직이는 것은 이만큼


    • 이었다. 세부 사항이 신경이 쓰이는 분은 아래에서.

    검증



    검증 방법을 자세하게 기재합니다.

    환경



    다음 환경에서 차이점을 비교했습니다.
  • Chrome: 81.0.4044.138 ※Mac
  • Firefox: 76.0.1 (64비트) ※Mac
  • Safari: 13.1 (15609.1.20.111.8) ※Mac
  • Microsoft Edge: 81.0.416.72 ※Win10
  • Internet Explorer: 11.0.14393.0 ※Win10

    • 방법



    이하의 캐릭터 라인을 텍스트 삽입 메소드 3개에 대해서 실시했습니다 (3×3의 9 패턴)

    ① '黄色い雲はkintone'② '黄色い雲は\nkintone'③ '<s>黄色い雲はkintone</s>'
    실행한 JavaScript는 이쪽
    
document.getElementById('id1').textContent = '黄色い雲はkintone';
document.getElementById('id2').innerText = '黄色い雲はkintone';
document.getElementById('id3').innerHTML = '黄色い雲はkintone';

document.getElementById('id4').textContent = '黄色い雲は\nkintone';
document.getElementById('id5').innerText = '黄色い雲は\nkintone';
document.getElementById('id6').innerHTML = '黄色い雲は\nkintone';

document.getElementById('id7').textContent = '<s>黄色い雲はkintone<s>';
document.getElementById('id8').innerText = '<s>黄色い雲はkintone<s>';
document.getElementById('id9').innerHTML = '<s>黄色い雲はkintone<s>';

    대상



    kintone의 사용자 정의보기로 간단한 HTML을 만들었습니다.
    (복수 브라우저/복수 PC에서도 간단하게 검증할 수 있어, kintone은 역시 편리했습니다~)
    HTML은 이런 느낌입니다. <body> <div> <p class="test-h1">'노란 구름은 kintone'</p> <h2 class="test-h2" id="id1">textContent</h2> <h2 class="test-h2" id="id2">innerText</h2> <h2 class="test-h2" id="id3">innerHTML</h2> </div> <div> <p class="test-h1">'노란 구름은 \nkintone'</p> <h2 class="test-h2" id="id4">textContent</h2> <h2 class="test-h2" id="id5">innerText</h2> <h2 class="test-h2" id="id6">innerHTML</h2> </div> <div> <p class="test-h1">'<s>노란 구름은 kintone<s>'</p> <h2 class="test-h2" id="id7">textContent</h2> <h2 class="test-h2" id="id8">innerText</h2> <h2 class="test-h2" id="id9">innerHTML</h2> </div> </body> 각 브라우저에서 비교 Chrome ① '노란 구름은 킨톤' 본 목적은 모두 동일했습니다. ②'노란 구름은\nkintone' innerText 만 개행이 제대로 표시되었습니다. (innerText의 경우에만 br 태그가 들어있었습니다) ※ 개발자 툴상에서는 전부 개행되고 있습니다만, br 태그가 없으면 HTML 화면상에서는 개행되어 있지 않았습니다. 재미 있습니다. ③ '<s>노란 구름은 kintone<s>' innerHTML 만 취소 선을 포함했습니다. (HTML 태그로 이동) Firefox 거의 크롬과 같은 결과였지만, ② Chrome에서는 textContent의 경우도 개발자 툴상에서는 개행되고 있었습니다만, Firefox의 개발자 툴상에서는 개행은 되지 않고 공백이 들어가 있을 뿐이었습니다. 조금 다르고 재미 있습니다. Safari Firefox와 함께했습니다. Microsoft Edge Chrome과 함께했습니다. (역시 Chromium) Internet Explorer Firefox와 함께했습니다. (화면이 없어서 죄송합니다 ·) 사이고에게 여러가지 스스로 조사하지 않으면 모르는 것이구나~라고 공부가 되었습니다. 특히 innerText × \n 의 개행의 차이는 몰랐네요. 그럼! ≧(+･` ཀ･´)≦
    킨톤 첨부 파일을 URL로 표시
    kintone 사용자 정의 - 기초 기초 편 -

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage