第4回 要素の操作＆ユーティリティ編：連載：jQuery逆引きリファレンス（2/19 ページ）

<style type="text/css">

.self { background-color:Yellow; }
.sib { border: solid 1px Blue; margin: 5px }

</style>

  ……中略……

<script type="text/javascript">

$(function() {
  $('div#self'). // <div id="self">要素を取得
    prepend('<div class="sib">兄</div>'). // 子要素先頭に追加
    append('<div class="sib">弟</div>').  // 子要素末尾に追加
    before('<div>伯父さん</div>'). // 要素の前方に追加
    after('<div>叔父さん</div>'); // 要素の後方に追加
});

</script>

  ……中略……

<div id="self" class="self">
    自分
</div>

$('div#self').
  prepend($('<div></div>').addClass('sib').text('兄')).
  append($('<div></div>').addClass('sib').text('弟')).
  before($('<div></div>').text('伯父さん')).
  after($('<div></div>').text('叔父さん'));