jQueryをつかって、中身はそのままでHTMLタグを書き換える

replacewith
このエントリーをはてなブックマークに追加
PR

HTMLタグを強制的に変更したいときに

HTMLから操作がするのが難しいケースや、動的に変更させたいときに使える方法

 

 

jQueryを使ってHTMLのタグの中身はそのままで、タグのみを変更する

例えば

<h1>テスト</h1>

 

があった場合に次のようにしたい場合

<p>テスト</p>

 

HTMLタグのみ変更したい

 

html() を使った場合は

HTMLを出力することができるが、指定したHTMLそのものまでは変更できない

そこで使うのが replaceWith() こちらを使えば、指定した要素そのものを置き換えます

 

replaceWith() の例

$('h1').replaceWith("<p>変更した</p>");

 

こうすることで、h1タグが pタグに置き換わり、中身も変更したものに変わります

コレでは、HTMLタグの中身は保持できていないので text() を使って中身を取得しておき

HTMLタグを指定して中に、 text() で取得した内容を入れてやる

次のようなコードになる

 

$('h1').replaceWith(function() {
  $(this).replaceWith("<p>"+$(this).text()+"</p>")
});

 

 

こちらのようにすることで、HTMLタグのみを変更して、中身を保持することが出来ました

 

ただ、このままでは HTMLタグについている IDやCLASS その他の属性が引き継がれないので

引き継がれるようにする必要がある

 

 

IDとCLASSを取得して新しく書き換えたHTMLタグに追加する

$('h1').replaceWith(function() {
  var tag_class = $(this).attr("class");
  var tag_id = $(this).attr("id");
  
  if ( tag_class == null) {
    var tag_class_plus =[];
  } else {
    var tag_class_plus = 'class="'+tag_class+'"';
  }
  if ( tag_id == null ) {
    var tag_id_plus =[];
  } else {
    var tag_id_plus = 'id="'+tag_id+'"';
  }
  $(this).replaceWith('<p '+tag_id_plus+'  '+tag_class_plus+'>'+$(this).html()+'</p>');
});

このようにして、classとidを取得して タグに入れる

他にも、属性がある場合には attr で取得して var に入れて、それを新しいタグで使えばOKです

あと、classとidが指定されていなかった時は空なので

その時はvarで指定した変数を初期化するためにifを使って、値があるときと無いときで内容を変えています

 

これでHTMLタグそのものを変更する場合に、大体のケースで利用できるかと思います。

 

 

さらに HTMLタグにある全ての属性を取得して、それを新しいタグに入れる方法が

今のところ思いついていないのですが、それが思いついたらベストかなと思います

また、思いついたら こちらの方に追加します

PR

COMMENT

  1. thankyou

    ちょうどこのやり方を探していて参考になりました!
    すべての属性を取得するのなら以下の手法でできそうですね。
    https://gist.github.com/mach3/6598728

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)