Before injecting any elements to our HTML DOM we should run HTML validation on our page. Valid HTML is crucial to having consistent, cross-browser results.
There is a great, artistic beauty to a syntax so simple as the constructor for the Element class. The first, mandatory parameter is the tag name. In this example we pass div in order to create a DIV tag in memory, not on the page...yet. The second parameter to the constructor is an object of properties to assign to the in-memory element.
<form action="javascript:" method="get">
<span id="my_error"></span>
<input id="submit" type="button" value="Submit Form"/>
</form>
<script type="text/javascript">
$('submit').addEvent('click', function() {
// the element constructor has a simple syntax
my_error = new Element('div', {
'id': 'my_error',
'text': 'Error!',
'style': 'border: 1px solid #F00; width:200px;'
});
// use element.replaces() to switch the span...