jqueryでタグを追加するTips

論理的で正しいhtmlを記述する。デザインをcssで実現しようと試みる。ダメだ、タグ（div）が足りねぇ…。
これって結構経験したことあるパターンじゃありませんか？
でもデザインのためにdivを追加するのはイヤだし、ということで、jqueryを使いhtmlをいじることなくdivを追加する方法を考えてみました。

例として、div#contentsをあたらにdiv#js_contentsを生成して囲むという場合。

$(document).ready(function(){
	$("#contents").before("<div id=¥"js_contents¥">")
	$("#contents").clone().appendTo("#js_contents")
	$("#js_contents+#contents").remove()
});

簡単に説明すると、まず$("#contents").before("<div id=¥"js_contents¥">")で#contentsの前に<div&nbspid="js_contents">を生成します。
このとき、なぜか#js_contentsの閉じタグが<div&nbspid="js_contents">の直後に生成されてしまうため、#js_contentsが#contentsを囲む形になりません。

<div id="js_contents"></div>
<div id="contents">
  hoge
</div>

そこで次に$("#contents").clone().appendTo("#js_contents")で#js_contentsの中に#contentsのコピーを生成します。

<div id="js_contents">
  <div id="contents">
    hoge
  </div>
</div>
<div id="contents">
  hoge
</div>

これで#js_contentsが#contentsを囲む形となりました。
しかし、#js_contentsに隣接する#contentsが余分なので、$("#js_contents+#contents").remove()で削除します。

ちょっと遠回りですがこれで実現可能です。
ただ疑問なのは、もともとのhtml上ではdivを増やしてはいませんが、こういう方法でdivを増やすのって結局論理的にはどうなんだろ。結局ムダなdivを増やすと言うことになってしまうんでしょうか…？