Avoid raw HTML entities

Using JavaScript's built-in DOM methods can be a hassle when you're trying to add text to a new DOM node. The correct way of adding text to a node is to use document.createTextNode(), although a popular alternative is element.innerHTML. Additionally, some libraries (like Scriptaculous) have DOM creation helpers built-in for more easily creating new HTML dynamically.

If you're trying to add text from feed.title (or another text-based value) that contains an HTML entity, you typically run into issues where the HTML entity is displayed literally instead of being converted to the intended character… and that sucks. The simplest way to work around such issues when generating HTML on-the-fly using DOM methods is to create empty nodes with id's assigned to them (i.e. <div id=“boogers”></div>), and then use innerHTML to add the content to the nodes after they've been added to the DOM tree.

The following code will have the body of the page display “You & I.”

var phrase = "You & I.";
var span = document.createElement('span');
span.appendChild(document.createTextNode(phrase));
document.body.appendChild(span);

The following code will have the body of the page display “You & I.”, which is what we want.

var phrase = "You & I.";
var span = document.createElement('span');
span.id = 'myId';
document.body.appendChild(span);
document.getElementById('myId').innerHTML = phrase;

If you were using Scriptaculous' Builder.node() functionality, you'd do the following to get the translated HTML entities (like we want).

var phrase = "You & I.";
document.body.appendChild(
	Builder.node('span', {'id':'myId'})
);
$('myId').innerHTML = phrase;