jQuery -> Selected Element to HTML

I am trying to wrap specific elements in a box if the visitor is using < IE9 so I can apply a box shadow across all browsers.

Unfortunately I cannot quite work out how to do it. Does anyone know how to convert the selected element back into HTML?

<script>
    $(document).ready(function() {
        $('img').each(function() {
      开发者_如何学运维      var img = $(this).clone();
            var html = '<div class="bounding">'+$(img)+'</div>';
            $(this).replaceWith(html);
        });
    });
</script>

The script is printing out [object Object]. .html() doesn't work because that is basically innerHTML. Is there a jQuery function that achieves this?

Just use .wrap

$('img').wrap('<div class="bounding" />');        

Example - http://jsfiddle.net/BTJmn/

Try

$(document).ready(function() {
    $('img').wrap('<div class="bounding" />');
});

The great news is that the guys at jQuery thought of this situation and created wrap

You use it like this:

$('img').wrap('<div class="bounding" />');

Try using the jQuery function wrap().

<script>
    $(document).ready(function() {
        $('img').wrap('<div class="bounding" />');
    });
</script>

My understanding is that you want to wrap an existing element in some other element. There is a convenience method for that in jQuery: wrap().

So, your code would look like this:

<script>
$(document).ready(function() {
    $('img').wrap('<div class="bounding" />');
});
</script>