Question

how do I get all content inside a DIV? I want to save all the code that exists within #wrapper DIV on my page. That is easy. But the thing is… how do I select all EXCEPT for one particular object (the image with “main” class).

You can see how it works here http://www.jsfiddle.net/8A27a/

This is what I have so far:

        <div id="wrapper">
            <div class="icon"><img src="http://www.yousendit.com/en_US/theme_default/images/g_logo_trans_110x63.gif"></div>
            <div class="icon"><img src="http://www.yousendit.com/en_US/theme_default/images/g_logo_trans_110x63.gif"></div>   
            <div class="icon"><img src="http://www.yousendit.com/en_US/theme_default/images/g_logo_trans_110x63.gif"></div>  
            <img class="main" src="http://afteramerica.files.wordpress.com/2010/01/061221225103_abraham_lincoln_lg1.jpg">
        </div>

        <input type="button" value="save" class="save">

    <script>
$(document).ready(function() { 
            $('.save').live('click', function() {
                var content = $('#wrapper').html();
                alert(content);
             });
});
</script>

Answer 1

The only reliable way I can think of is to clone the DIV, remove the IMG tag and get the resulting HTML:

var e = $('#wrapper').clone();
$('img.main', e).remove();
alert(e.html());

Note that this can be inefficient for DIVs with a lot of content.