dynamic span spacing

by sprugman

HTML

<div id="imgOnly" class="divider">
    image only
    <pre>
    [div]
       [img]
    [/div]
    </pre>
</div>
<div>
    <img src="http://farm4.staticflickr.com/3112/3534533033_0c1c1b1c35_s.jpg" />
</div>



<div id="noWhite" class="divider">
    span no whitespace - not a problem
    <pre>
    [div]
       [span][img]
    [/div]
    </pre>
</div>
<div>  
    <span class="hide">.</span><img src="http://farm4.staticflickr.com/3112/3534533033_0c1c1b1c35_s.jpg" />
</div>



<div id="withWhite" class="divider">
    span with whitespace - what the--!?
    <pre>
    [div]
       [span]
       [img]
    [/div]
    </pre>

</div>
<div>  
    <span class="hide">.</span>
    <img src="http://farm4.staticflickr.com/3112/3534533033_0c1c1b1c35_s.jpg" />
</div>



<div class="divider">
    dynamic 
    <input type="button" value="add" /> 
    using
    <select id="method">
        <option value="insertBefore">insertBefore</option>
        <option value="jQueryPrepend">jQuery.prepend</option>
    </select>        
    
    <br />
    insertBefore is not a problem. It creates:
    <pre>
    [div]
       [span][img]
    [/div]
    </pre>
    
    <br />
    jQuery.prepend causes a problem and creates:
    <pre>
    [div][span]
       [img]
    [/div]
    </pre>
    


</div>
<div id="target">  
    <img src="http://farm4.staticflickr.com/3112/3534533033_0c1c1b1c35_s.jpg" />
</div>



<div class="divider"></div>

CSS

.divider {
    padding: 10px;
    background: lightblue;
}

img {
    height: 50px;
    width: 50px;
}

.hide {
    height: 0;
    width: 0;
    overflow: hidden;
    display: block;
}

pre {
    margin: 0;
    font-size: 10px;
}

body {
    font-size:.85em;
}

JavaScript

$(function() {
    $('input').click(function() {
        var method = $('#method').val();
        if (method == 'insertBefore') {
            var span = document.createElement('span');
            span.className = 'hide';
            span.innerHTML = '.';
            var parent = $('#target')[0];
            var im = $('#target img')[0];
            parent.insertBefore(span, im);
            console.log('inserting span');
        } else {
            $('#target').prepend('<span class="hide">.</span>');
            console.log('jquery.prepending span');
        }
    });
});