jquery add to another div-boxes inside one special box... ie7+

Question

hi folks,

here is my code:

$('.round').each ( function ( ) {
    var content = $(this).html ( );

    $(this).removeClass ( 'round' );
    $(this).html ( '' );

    var inner = $(document.createElement('DIV')).addClass ( 'rc-inner' ).html ( content );
    var outer = $(document.createElement('DIV')).addClass ( 'rc-outer' ).append ( inner );
    $(this).append ( outer );
} );

ie7 gives me this error...:

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Win64; x64; Trident/4.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
Zeitstempel: Sat, 4 Sep 2010 22:35:30 UTC
Meldung: Unerwarteter Aufruf oder Zugriff.
Zeile: 103
Zeichen: 460
Code: 0
URI: **SNIP**/libs/jquery/1.4.2.js

me and my team worked out the solution to add a special class to a div-box (example: round for rounded border) and after the page was loaded, the js should save the content of the given div-box, add two new div-boxes inside the given div... and add the saved content into the inner fresh created div-box.... firefox...knows how it was meant and do it fine!... ie give us some errors.... whyever...

every other js would stop because of this error... so, we don'T really know, what weshould change.... it's just annoying.... fuckin ie -.-

Answer 1

I would simplify this overall side-stepping the issue by using an altogether different/simpler approach using .wrapInner(), like this:

$('.round').removeClass('round')
          .wrapInner('<div class="rc-outer"><div class="rc-inner"></div></div>');

You can give it a try here, this approach doesn't destroy any event handlers and is all around cheaper than re-creating the elements from the HTML (once you have over a few elements inside the .round elements).