<span class="wrap1´´>
<span class="wrap2´´>
<span class="wrap3´´>
<span class="wrap4´´>
<span class="wrap5´´>
<span class="wrap6´´>
<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>
</span>
</span>
</span>
</span>
</span>
</span>

<div class="box">
<h2>Wrap</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum tempor. Fusce lacinia. Duis blandit tincidunt lectus. Donec tortor. Nam fringilla justo vitae erat. Vivamus lobortis dui a nisl. Proin justo ante, lacinia non, aliquet in, egestas ac, leo. Sed metus libero, ornare eu, sagittis elementum, vulputate a, erat. Aliquam porttitor.
</p>
</div>

// Crio um array
var alltags = new Array();
function changeBox() {
// O método getElementsByTagName() retorna um array com todas os elementos <div> que existem no documento e armazena no array alltags.
var alltags=document.getElementsByTagName("div");
// A estrutura de repetição for passa por cada elemento <div> armazenado em alltags.
for (i=0; i<alltags.length; i++) {
// Verifica se o elemento tem a classe box.
if (alltags[i].className==´box´) {
// Armazena na variável element em  cada interação do for o velor armazenado no índice i de alltags
var element = alltags[i];
// Armazena o objeto pai de element na variável content
var content = element.parentNode;
// Cria os elementos XHTML <span>
var wrap1 = document.createElement(´span´);
var wrap2 = document.createElement(´span´);
var wrap3 = document.createElement(´span´);
var wrap4 = document.createElement(´span´);
var wrap5 = document.createElement(´span´);
var wrap6 = document.createElement(´span´);
// Atribui para cada elemento XHTML <span> uma classe
wrap1.setAttribute(´class´, ´wrap1´);
wrap2.setAttribute(´class´, ´wrap2´);
wrap3.setAttribute(´class´, ´wrap3´);
wrap4.setAttribute(´class´, ´wrap4´);
wrap5.setAttribute(´class´, ´wrap5´);
wrap6.setAttribute(´class´, ´wrap6´);
// Insere um elemento filho ao elemento atual, antes de um determinado elemento. O elemento wrap1 é inserido em content antes de element
// Mais informações do método insertBefore no endereço: http://developer.mozilla.org/pt/DOM/element.insertBefore.
content.insertBefore(wrap1, element);
// O elemento wrap1 recebe o novo elemento wrap2. E assim acontece com os demais elementos respectivamente.
// Mais informações do método appendChild no endereço: http://developer.mozilla.org/Pt/DOM/Element.appendChild.
wrap1.appendChild(wrap2);
wrap2.appendChild(wrap3);
wrap3.appendChild(wrap4);
wrap4.appendChild(wrap5);
wrap5.appendChild(wrap6);
// Remove element de content
content.removeChild(element);
// E insere element para wrap6
wrap6.appendChild(element);
}
}
}
// Executa a função
changeBox();

*{
padding:0;
margin:0;
font:1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body{
background:transparent url(bg_body.png) repeat left top;
font-size:11px;
padding:100px 400px;
}
h2{
font-size:1.5em;
padding-bottom:.5em;
}
p{
color:#666;
}
.box{
padding:25px 30px 30px;
}
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .wrap6 {
display:block;
}

.wrap1 {
background:transparent url(bg_cr.png) repeat-y right center;
margin-bottom:1em;
}
.wrap2 {
background:transparent url(bg_cl.png) repeat-y left center;
}
.wrap3 {
background:transparent url(bg_tr.png) no-repeat right top;
}
.wrap4 {
background:transparent url(bg_tl.png) no-repeat left top;
}
.wrap5 {
background:transparent url(bg_br.png) no-repeat right bottom;
}
.wrap6 {
background:transparent url(bg_bl.png) no-repeat left bottom;
}