Hola
Aquí tienes una adaptación que puede que te ayude
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
var arr = ['mensaje 1', 'mensaje 2', 'mensaje 3'];
function f (){
var divmsg = document.getElementById('mensajes');
for (var i = 0; i < 3; i++) {
donde = document.getElementById('p'+parseInt(i-1))
var nodo = document.createElement('p');
nodo.setAttribute("class", "rojo"+i);
nodo.setAttribute('id', 'p'+i);
nodo.innerHTML = arr[i];
if (divmsg.getElementsByTagName('p').length == 0) {
divmsg.appendChild(nodo);
} else {
divmsg.insertBefore(nodo, donde);
}
}
}
//-->
</script>
<style type="text/css">
<!--
p {border: 1px solid black}
p.rojo0 {background-color: red}
p.rojo1 {background-color: green}
p.rojo2 {background-color: yellow}
-->
</style>
</head>
<body>
<div id="mensajes"></div>
<input type="button" value="Mensajes" onclick="f();" />
</body>
</html>
Suerte