jQuery -> Selected Element to HTML

Question

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?

score 5 · Accepted Answer · answered Sep 16 '11 at 08:30

5

Just use .wrap

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

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

answered Sep 16 '11 at 08:30

Richard Dalton

34,863
6
72
90

Looks like we all had the same idea, so +1 for being first! – Fenton Sep 16 '11 at 08:32

score 2 · Answer 2 · answered Sep 16 '11 at 08:31

2

Try

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

answered Sep 16 '11 at 08:31

Shef

43,457
15
77
89

score 2 · Answer 3 · answered Sep 16 '11 at 08:31

2

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" />');

answered Sep 16 '11 at 08:31

Fenton

224,347
65
373
385

score 1 · Answer 4 · answered Sep 16 '11 at 08:30

1

Try using the jQuery function wrap().

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

answered Sep 16 '11 at 08:30

trapp

86
4

score 0 · Answer 5 · answered Sep 16 '11 at 08:32

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>

jQuery -> Selected Element to HTML

5 Answers5