オブジェクトの操作その5(HTML 要素のラッピング、置き換え、削除)
次は要素のラッピング、置き換え、削除について。
こいつらも使いそうだなぁ〜。
該当する関数は、
の5種。
■ラッピング
・囲まれる要素.wrap(囲む要素)
・囲まれる要素.wrapAll(囲む要素)
・囲まれる要素の親要素.wrapInner(囲む要素)
■置き換え
・置換される要素.replaceWith(置換する要素)
■削除
・削除される要素.remove()
wrap*系は動きを見れば分かると思う。
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { alert(".divH1の要素を各々 h1 要素で囲むぜ。"); $(".divH1").wrap("<h1 style='color: red;'/>"); alert(".divH2の要素をまとめて h2 要素で囲むぜ。"); $(".divH2").wrapAll("<h2 style='color: blue;' />"); alert("#div1の内部要素#span1をstrongで囲むぜ。"); $("#div1 #span1").wrapInner("<span style='color: green;'/>"); alert("#div2を、ボタンに置き換えちゃう。"); $("#div2").replaceWith("<input type='button' value='ぼたんですよ'/>"); alert("#div3を削除しちゃう。"); $("#div3").remove(); }) </script> <style> div { border: solid 1px gray; } </style> </head> <body> <div id="div1" class="divH1">#div1 .divH1 <span id="span1">ぱんぱかぱんつ</span>でぱんぱかぱん</div> <div id="div2" class="divH2">#div2 .divH2 ぱんぱかぱんつでぱんぱかぱん</div> <div id="div3" class="divH1">#div3 .divH1 ぱんぱかぱんつでぱんぱかぱん</div> <div id="div4" class="divH2">#div4 .divH2 ぱんぱかぱんつでぱんぱかぱん</div> </body> </html>