jQueryでHTMLタグだけを変更(中の要素は変更なし!)

jQueryでHTMLタグだけを変更(中の要素は変更なし!)
この記事は約2分で読めます。

jQueryを使用して特定のHTMLタグを変更する方法です。
中身は元のままっていうのが味噌です。

ミソです。

例えば、<p>タグを<div>タグに変更したい場合のコードの紹介。

変更前のHTML
<p class="change-tag">これは変更される段落です。</p>
jQueryコード
$(document).ready(function() {
  $('.change-tag').replaceWith(function() {
    return $('<div></div>').html($(this).html());
  });
});

1行ずつ説明を!
まずは1行目の

$(document).ready(function() {...});

DOMが完全に読み込まれた後にコードを実行します。

$('.change-tag').replaceWith(function() {...});

「.change-tag」クラスを持つ要素を選択して、
replaceWithメソッドを使ってその要素を新しいタグで置き換えます。

「replaceWith」とは

replaceWithは、jQueryのメソッドの一つで、選択した要素を新しい要素で置き換えるために使用されます。
このメソッドを使うと、指定した要素を削除し、その位置に新しいHTML要素を挿入することができます。

return $('<div></div>').html($(this).html());

現在の要素のテキストを取得して、新しい<div>タグを作成してその中に内容を設定し完了です!
上記のjQueryコードを実行すると、以下のように変更されます。

<div>これは変更される段落です。</div>

本当に<div>だけになっちゃった。

この方法を使えば、特定のタグを簡単に変更し、中の内容をそのまま保持することができます。
jQueryを活用して、動的なコンテンツの管理をより効率的に行いましょう。
ぜひ、実際のプロジェクトで試してみてください。

javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました