Khác biệt giữa innerText, innerHTML, textContent trong Javascript

[JAVASCRIPT]


Để lấy nội dung trong thẻ ta thường thấy người ta dùng innerText, innerHTML hoặc có khi dùng textContent. vậy mấy cái này khác nhau như thế nào. Ta xem ví dụ sau:
  <div id='hello'>Hello Javascript <span style="display:none;"> 2020</span></div>

    <script>
        var mydiv = document.getElementById('hello');
        console.log(mydiv.innerHTML); 
        // Hello Javascript <span style="display:none;"> 2020</span>
        
        console.log(mydiv.textContent);
        // Hello Javascript  2020
        
        console.log(mydiv.innerText); 
        // Hello Javascript
    </script>

Ta thấy innerHTML sẽ in ra nội dung text và những thẻ trong div này luôn. Còn textContent sẽ in ra nội dung text và nội dung các thẻ bên trong div này luôn. Còn innerText sẽ in ra nội dung text, không in ra nội dung của thẻ ẩn( do thẻ span có display: none, cái này dùng để ẩn thẻ span này).

HTML

Hello Javascript 2020

Console :

Vậy là ta biết sự khác biệt giữa 3 anh trên rồi nhé ^_^.