You can use jQuery's .text() function.

For example:

http://jsfiddle.net/9H6Ch/

From the jQuery documentation regarding the .text() function:

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML.

Previous Versions of the jQuery Documentation worded it this way (emphasis added):

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as &lt; for <).

Using Lodash:

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Source code

This is, by far, the fastest way I have seen it done. Plus, it does it all without adding, removing, or changing elements on the page.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;

⚠️ Warning: it does not escape quotes so you can't use the output inside attribute values in HTML code. E.g. var divCode = '<div data-title="' + escapeHTML('Jerry "Bull" Winston') + '">Div content</div>' will yield invalid HTML!

I think I found the proper way to do it...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

By the books

When editing HTML content between <tags>, use "HTML Entity Encoding":

For for editing the HTML content between an opening and closing tag using JavaScript, OWASP recommends you to "look at the .textContent attribute. It is a Safe Sink and will automatically HTML Entity Encode."

When editing HTML attributes use recommended "HTML Attribute Encoding":

Previously I offered the function below to do the encoding yourself, but there are "Safe Sinks" for HTML Attribute Encoding as well. For example, the second argument of the setAttribute function is allowed to be "dangerous" because it will be encoded automatically. Please refer to this page for more safe places to put potentially dangerous content: https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#safe-sinks

Manual method for HTML Attributes:

It's better to not do it yourself, but if you so desire, OWASP recommends that "[e]xcept for alphanumeric characters, [you should] escape all characters with ASCII values less than 256 with the &#xHH; format (or a named entity if available) to prevent switching out of [an] attribute."

So here's a function that does that, with a usage example:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
  )
}

document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('"fakeclass" onclick="alert("test")') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

You should verify the entity ranges I have provided to validate the safety of the function yourself. You could also use this regular expression which has better readability and should cover the same character codes, but is about 10% less performant in my browser:

/(?![0-9A-Za-z])[\u0000-\u00FF]/g

It was interesting to find a better solution:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

I do not parse > because it does not break XML/HTML code in the result.

Here are the benchmarks: http://jsperf.com/regexpairs Also, I created a universal escape function: http://jsperf.com/regexpairs2

The most concise and performant way to display unencoded text is to use textContent property.

Faster than using innerHTML. And that's without taking into account escaping overhead.

document.body.textContent = 'a <b> c </b>';

DOM Elements support converting text to HTML by assigning to innerText. innerText is not a function but assigning to it works as if the text were escaped.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

You can encode every character in your string:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Or just target the main characters to worry about (&, inebreaks, <, >, " and ') like:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

A universal one-liner, working in browsers and Node.js:

const html = unsafe.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`)

If you already use modules in your application, you can use escape-html module.

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

For a quick one-liner, the following works:

const escaped = new Option(unescaped).innerHTML;

For example:

const unescaped = "<h1>Header</h1>";
const escaped = new Option(unescaped).innerHTML; // "&lt;h1&gt;Header&lt;/h1&gt;"

I came across this issue when building a DOM structure. This question helped me solve it. I wanted to use a double chevron as a path separator, but appending a new text node directly resulted in the escaped character code showing, rather than the character itself:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* This resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* This was key */

Just write the code in between <pre><code class="html-escape">....</code></pre>. Make sure you add the class name in the code tag. It will escape all the HTML snippet written in
<pre><code class="html-escape">....</code></pre>.

const escape = {
    '"': '"',
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
}
const codeWrappers = document.querySelectorAll('.html-escape')
if (codeWrappers.length > 0) {
    codeWrappers.forEach(code => {
        const htmlCode = code.innerHTML
        const escapeString = htmlCode.replace(/"|&|<|>/g, function (matched) {
            return escape[matched];
        });
        code.innerHTML = escapeString
    })
}

<pre>
    <code class="language-html html-escape">
        <div class="card">
            <div class="card-header-img" style="background-image: url('/assets/card-sample.png');"></div>
            <div class="card-body">
                <p class="card-title">Card Title</p>
                <p class="card-subtitle">Srcondary text</p>
                <p class="card-text">Greyhound divisively hello coldly wonderfully marginally far upon
                    excluding.</p>
                <button class="btn">Go to </button>
                <button class="btn btn-outline">Go to </button>
            </div>
        </div>
    </code>
</pre>

I think you should change the way to do it, don't try to escape HTML to use innerHTML after, it is wrong. You should create an element with createElement and use innerText to add an insecure input, and then use appendChild, prependChild, inserAfter or inserBefore.

Solution for Vanilla JavaScript in a DOM environment

Instead of:

// vulnerable
const html = "<b>Hello World!</b>"
const element = `<div>${html}</div>`

document.body.innerHTML = element 

You should do:

// secure
const html = '<b>Hello World!</b>'
const element = document.createElement('div')
element.innerText = html 

document.body.appendChild(element)

⚠️ Warning Never do document.body.innerHTML = element.innerText