TIL why you should always use textContent

POSTED ON: Jan 31, 2023

Today I learned the difference between Node.textContent and all the others.

Versus `HTMLElement.innerText`.

Node.textContent gets content of any element, including hidden elements, <script></script> and <style></style> elements.
innerText only shows "human-readable" elements.
innerText also triggers a reflow.

Versus `HTMLElement.innerHTML`

innerHTML can cause XSS attacks as it runs the HTML.
Node.textContent strips tags.

var el = document.createElement('div');
el.innerHTML = 'A<p>B<span>C</span>D</p>D';
el.textContent; // "ABCDD" (HTML tags stripped successfully)

via the MDN
via https://stackoverflow.com/a/31466405/4096078

Related TILs

Tagged: js

TIL why you should always use textContent

Today I learned the difference between 'Node.textContent'. It handles all elements, even hidden ones. It also prevents XSS attacks since it strips tags.

Jan 31, 2023

TIL prepend

When you're creating new elements in Javascript, you want to attach the new element to something that exists in the DOM already. You do that with append, and prepend.

Dec 04, 2022

TIL the simulating a Pipe function

It’s a pipe function that allows you to chain multiple operations together by taking a series of functions as arguments and applying them in a specific order to the input.

Dec 03, 2022

TIL why you should always use textContent

Versus HTMLElement.innerText. #

Versus HTMLElement.innerHTML #

Related TILs

Versus `HTMLElement.innerText`.

Versus `HTMLElement.innerHTML`