Hey friends!
Today, we’re going to understand three very commonly used properties in JavaScript when dealing with DOM manipulation:
innerHTML, innerText, and textContent.
At first, they look similar because all three are used to get or set the content of HTML elements. But they behave differently in many situations, and choosing the right one is important based on our need.
What is innerText?
Developer-Friendly Definition:
innerText returns the human-readable, styled text as seen in the browser. It respects CSS rules like display: none, visibility: hidden, and text formatting.
Output:
What is textContent?
textContent returns all text nodes inside an element .the text is visible or hidden by CSS. It completely ignores HTML formatting, and it returns a raw, unformatted string.
Output:
What is innerHTML?
innerHTML is a JavaScript property used to get or set the entire HTML content of an element — including all tags, attributes, and structure.
Output:
Final Thought
textContent = Get everything, including hidden
innerText = Only get what's visible
innerHTML = Get full HTML with tags
Thanks for reading!
Hope this helped you understand Dom Using(innerText,innerHTML,textContent) better.
See you in the next blog!
Happy Coding — Stay Curious
Top comments (2)
Jeezz this is so good to know. Thanks so much
thanks a lot! Glad it helped you