Rounded corners using javascript

[Wolphie]

I'm trying to create rounded corners using javascript and CSS. The reason i'm using javascript is so i don't have un-needed markup in my code.

 

Javascript:

function roundedCorners() {
  var divs = document.getElementsByTagName('div');
  var rounded_divs = [];
  for(var i = 0; i < divs.length; i++) {
    if(/\brounded\b/.exec(divs[i].className)) {
      rounded_divs[rounded_divs.length] = divs[i];
    }
  }
  /* Now add additional divs to each of the divs we have found */
  for(var i = 0; i < rounded_divs.length; i++) {
    var original = rounded_divs[i];
    /* Make it the inner div of the four */
    original.className = original.className.replace('rounded', '');
    /* Now create the outer-most div */
    var tr = document.createElement('div');
    tr.className = 'rounded2';
    /* Swap out the original (we'll put it back later) */
    original.parentNode.replaceChild(tr, original);
    /* Create the two other inner nodes */
    var tl = document.createElement('div');
    var br = document.createElement('div');
    /* Now glue the nodes back in to the document */
    tr.appendChild(tl);
    tl.appendChild(br);
    br.appendChild(original);
  }
}
window.onload = roundedCorners;

 

CSS:

div.rounded {
width: 170px;
padding: 15px;
background: #FFFFFF;
text-align: left;
}
div.rounded2 {
width: 200px;
background: #FFFFFF url("images/tr.png") no-repeat top right;
}
div.rounded2 div {
background: transparent url("images/tl.png") no-repeat top left;
}
div.rounded2 div div {
background: transparent url("images/br.png") no-repeat bottom right;
}
div.rounded2 div div div {
background: transparent url("images/bl.png") no-repeat bottom left;
padding: 15px;
}

 

Example HTML:

<div class="rounded">
  This is a test
</div>

 

The output is just a rectangle, with no rounded corners. And i'm not sure why it's doing this. Hopefully somebody can help! 

[svivian]

First things first, make sure you aren't getting any errors. This is easy in Firefox with the Firebug extension; it should also tell you what the "resultant" HTML is. If you don't have FF, turn on the IE setting that notifies you about script errors.

[Wolphie]

Thats the problem, i'm not getting any javascript errors. Yet the HTML is still only <div class="rounded">This is a test</div> without the nested divs.