не лучший вариант, но можно сделать что-нибудь типа такого
<!DOCTYPE >
<HTML>
<style>
.cl {width:100px; height: 40px; border: 1px solid red;}
#di {border: 1px solid blue;}
</style>
<BODY>
<div id="idd">
<div class="cl">1</div>
<div class="cl">2</div>
<div>
<script>
topmenu = (function(window) {
var elements = {};
return {
Sattr: function(name)
{
try{ elements = document.querySelectorAll(name); }catch(e){}
return this;
},
sob: function(type,block)
{
for(var i=0; i<elements.length;i++)
{
try {
try {
elements[i].addEventListener(type, block, false);
} catch(e) {
elements[i].attachEvent("on"+type, block);
}
} catch(e){}
}
return this;
}
}}());
document.body.onmousedown = function (){
topmenu.Sattr("#idd .cl").sob("click",function(){
if(!document.getElementById("di")) {
var div = document.createElement("div");
div.id = "di";
div.innerHTML = "div";
} else var div = document.getElementById("di");
this.appendChild(div);
});
}
var dv = document.createElement("div");
dv.className = "cl";
dv.innerHTML = "3";
document.getElementById("idd").appendChild(dv);
</script>
</BODY>
</HTML>