2inc.org内の検索

• 
• 
• 
• 
• 

1. Home
2. JavaScript
3. jqueryでタグを追加するTips

jqueryでタグを追加するTips

• 2007年7月14日（土）
• Comments(3)
• Trackback(0)

論理的で正しい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を増やすと言うことになってしまうんでしょうか…？

関連のあるエントリー

• jqueryでカテゴリごとにメニューの画像を切り替えるTips (4)

ブックマーク

• next：jqueryでカテゴリごとにメニューの画像を切り替えるTips