Jquery Manipulation method behavior

Experiments to see differences between the various ways to insert html into the dom.

by Nathan Perry

HTML

<div id="before">
    <span class="name">before:</span>
    <span class="target">target</span>
</div>
<div id="insertBefore">
    <span class="name">insertBefore:</span>
    <span class="target">target</span>
</div>
<div id="after">
    <span class="name">after:</span>
    <span class="target">target</span>
</div>
<div id="insertAfter">
    <span class="name">insertAfter:</span>
    <span class="target">target</span>
</div>
<div id="append">
    <span class="name">append:</span>
    <span class="target">target</span>
</div>
<div id="appendTo">
    <span class="name">appendTo:</span>
    <span class="target">target</span>
</div>
<div id="prepend">
    <span class="name">prepend:</span>
    <span class="target">target</span>
</div>
<div id="prependTo">
    <span class="name">prependTo:</span>
    <span class="target">target</span>
</div>

CSS

span.name {
    display: inline-block;
    width: 100px;
    border: none;
}
span {
    display: inline-block;
    border: 1px solid black;
    padding: 2px;
    margin: 2px;
}

div {
    border: 2px solid gray;
    padding: 2px;
    margin: 4px;
}

JavaScript

$('#after .target').after('<span>inserted</span>');
$('#before .target').before('<span>inserted</span>');
$('<span>inserted</span>').insertBefore('#insertBefore .target');
$('<span>inserted</span>').insertAfter('#insertAfter .target');
$('#append .target').append('<span>inserted</span>');
$('<span>inserted</span>').appendTo('#appendTo .target');
$('#prepend .target').prepend('<span>inserted</span>');
$('<span>inserted</span>').prependTo('#prependTo .target');
prepend