XT gets drunk and overthinks a problem

<!DOCTYPE html>
<html>
<head>
<title>HTML Character Entity Shenanigans</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
  font-family: Verdana, sans-serif;
  font-size: 10pt;
  color: #000;
  background-color: #FFF;
}
#output div {
  border-bottom: 1px solid #999;
}
</style>
<script type="text/javascript">
function destroy_die_attack( e ) {
    e.stopPropagation();
    e.preventDefault();
}

function check( e ) {
    if( e.keyCode == 13 ) {
        convert();
    }
}

function convert() {
    var entity = document.getElementById( 'entity' ).value.replace( /</g, '&lt;' );
    var output = document.getElementById( 'output' );
    var outputElement = document.createElement( 'div' );
    outputElement.innerHTML = entity.replace( /&/g, '&amp;' ).replace( /&amp;lt;/g, '&lt;' ) + ' = ' + entity;
    output.insertBefore( outputElement, output.firstChild );
}

window.addEventListener( 'load', function() {
    document.getElementById( 'form' ).addEventListener( 'submit', destroy_die_attack, false );
    document.getElementById( 'convert' ).addEventListener( 'click', convert, false );
    document.getElementById( 'entity' ).addEventListener( 'keyup', check, false );
}, false );
</script>
</head>
<body>
<form id="form">
<input type="text" id="entity" /><input type="button" id="convert" value="Convert" />
<div id="output"></div>
</form>
</body>
</html>