【jQuery】wrapInner:各要素の子要素を、HTMLで作成した要素で囲む

gistfile1.js

var elm = $('div.hoge');
elm
    .find('span.count').remove()
    .end()
    .css({'z-index': 100,
        'position': 'absolute',
        'left': '10px',
        'top': '20px'
    })
    .find('img')
        .css({'border': '1px solid #fff'})
    .end()
    .append('<span class="foo"><img src="bar.png"></span>')
    .wrapInner('<div class="wrapInner"></div>')
    .append('<span class="huga"><img src="hugahuga.png"></span>');

test.html

<!-- 元のhtml -->
<div class="hoge">
    <img src="hogehoge.png">
    <span class="count">123</span>
</div>


<!-- js実行後のhtml -->
<div class="hoge" style="z-index: 1; position: absolute; left: 10px; top: 20px;">
    <div class="wrapInner">
        <img src="hogehoge.png" style="border: 1px solid #fff">
        <span class="foo"><img src="bar.png"></span>
    </div>
    <span class="huga"><img src="hugahuga.png"></span>
</div>