A value from a form, API, or URL should normally be displayed as text, not interpreted as HTML. Assigning it to textContent tells the browser to create text content rather than parse tags and attributes.

const message = document.querySelector("#message");
message.textContent = userProvidedName;

Do not build markup by concatenation

  • Avoid assigning untrusted strings to innerHTML.
  • Create elements with DOM methods when a dynamic structure is needed.
  • If rich HTML is a genuine requirement, use a maintained sanitizer and define which tags and attributes are allowed.

Keep the context in mind

Text inserted into a text node is handled differently from values used in URLs, CSS, or HTML attributes. Validate a URL against the protocols and destinations your interface allows before assigning it to a link.

Test with angle brackets and quote characters in sample input. They should appear as visible characters, not become new interface elements.