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

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タグにある全ての属性を取得して、それを新しいタグに入れる方法が

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

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