Sometimes, we have to do some fixing to insert a string into an HTML property. Or just to display it.

But not everything is safe! Consider the following example:

>     document.getElementById('name').innerHTML = prompt('What is your name?');

This allows to introduce HTML vulnerabilities quite easily. Specially when you want to do HTML > X/HTML conversions.

So, I've came up with the following:

<!-- language: lang-js -->

	var safetext = function(text){
		var div = document.createElement('div');
		div.innerText = div.textContent = text;
		var safetext = div.innerHTML;
		div = null;
		return safetext.replace(/^\s+|\s+$/g, '');
	};

But then I realized that it could be optimized a little. That `div` is created and destroyed every single time you need a cleanup. So, I've optimized to the following:

<!-- language: lang-js -->

	var safetext = (function(text){
		this.innerText = this.textContent = text;
		return this.innerHTML.replace(/^\s+|\s+$/g, '');
	}).bind(document.createElement('div'));

The `this` will always be the `div` we created, and will always be the same one, so, no unnecessary cleanups or anything. It is always kept in memory, since it is bound to the `this` in the anonymous function. Or isn't it?

The resulting text is a string that is safe to use in your HTML. Using the example from before:

>     document.getElementById('name').innerHTML = safetext(prompt('What is your name?'));

This should show `&lt;script&gt;` if your name (for some bizarre reason) is `<script>`. Or it leaves unsafe characters behind, bound to break everything?

<hr>

To the best of my knowledge, and based on the 200 tests where I've used it, I didn't had a single problem or hiccup.

Am I missing something? Is my code indeed returning safe HTML strings? Is the 2nd iteration really more performant?