Back to plain JavaScript: innerHTML vs innerText

In an interview at NHN (a Korean IT company), I saw that I couldn't build even basic JavaScript features. It was a big reality check, and I started reviewing JavaScript again.

Based on the elements I marked up, I built the DOM with util functions.

Working this way after a long break, I'm really, really realizing how valuable React is.

The difference between innerHTML and innerText

- innerText: In a structure like <div>Hello <span> World </span></div>, using innerText returns "Hello World".

- In a structure like <div>Hello <span> World </span></div>, using innerHTML returns the full HTML string, <span> World </span>. You can also change the HTML with innerHTML. For example, element.innerHTML = "<b> Bold text </b>" replaces the element's content with "Bold text".

One-line summary: innerText works with text and ignores HTML tags, while innerHTML works with HTML and handles strings that include the tags.