How to handle and sanitize user input strings in a web form using JavaScript?

I am working on a web application where users can submit text input through a form. I want to ensure that the input is properly sanitized and stored without causing security issues such as XSS or invalid data handling.

For example, a user might enter a string like Mens Aviator Jacket or any other free-text value. I want to make sure that such input is safely processed, displayed, and stored in the database without breaking the application or introducing vulnerabilities.

Currently, I am using basic JavaScript validation to check empty fields, but I am unsure about the best practices for sanitizing and encoding user input before rendering it back on the page.

Here is a simplified version of what I am doing:

let userInput = document.getElementById("inputField").value; document.getElementById("output").innerHTML = userInput;

I understand that directly inserting input like this may not be safe.

What is the recommended way to:

Sanitize user input properly in JavaScript?

Prevent XSS when displaying user-submitted content?

Handle general strings safely before saving them to a database?

Any best practices or examples would be helpful.