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を増やすと言うことになってしまうんでしょうか…?

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく