要素の置き換えを行うメソッドとして JavaScript には replace メソッドがありますが、jQuery には replaceWith メソッドと replaceAll メソッドがあります( JavaScript の replace メソッドも使用できます )。
今回は、jQuery の replaceWith メソッド及び replaceAll メソッドの使用方法について解説いたします。
※replace メソッドの使用方法については、以下のページをご参照下さい。
JavaScript【 replace 】1. 文字列の置換
JavaScript【 replace 】2. メタ文字を使用した置換
JavaScript【 replace 】3. 様々な置換方法
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
replaceWith メソッドは、要素の置き換えを行うメソッドです。
replaceWith メソッドは、引数によって 2 通りの記述方法があります。
$(セレクタ).replaceWith( newContent );
$(セレクタ).replaceWith( function( function ) );
replaceWith メソッドの引数の内容は、それぞれ以下の通りです。
.replaceWith( newContent )
newContent |
---|
置換する要素を指定 (文字列、DOM 要素、jQuery オブジェクトが指定可能) |
.replaceWith( function )
function |
---|
置換する要素を戻り値として返す関数を指定 |
replaceAll メソッドも、要素の置き換えを行うメソッドです。
replaceAll メソッドと replaceWith メソッドとは要素の置換という同じ処理を行いますが、置換対象と指定する要素との記述位置が逆である点に違いがあります。
replaceAll メソッドは、次のように記述します。
$( newContent ).replaceAll( target );
replaceAll メソッドの引数の内容は 以下の通りです。
.replaceAll( target )
target |
---|
置換対象をセレクタで指定 |
replaceWith メソッドを使用して、span 要素内のテキスト( デフォルト表示:「こんにちは!」 )を置換します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn1").on("click", function() {
$("#spn1").replaceWith("<span id = 'spn1'>Hello!</span>");
});
$("#btn2").on("click", function() {
$("#spn1").replaceWith("<span id = 'spn1'>Bonjour!</span>");
});
});
</script>
<div style="background-color : #CCC; padding:20px;">
<span id = "spn1">こんにちは!</span>
<input type="button" id="btn1" value="英語">
<input type="button" id="btn2" value="仏語">
</div>
replaceAll メソッドを使用して、span 要素内のテキスト( デフォルト表示:「こんにちは!」 )を置換します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn3").on("click", function() {
$("<span id = 'spn2'>Hello!</span>").replaceAll("#spn2");
});
$("#btn4").on("click", function() {
$("<span id = 'spn2'>Bonjour!</span>").replaceAll("#spn2");
});
});
</script>
<div style="background-color : #CCC; padding:20px;">
<span id = "spn2">こんにちは!</span>
<input type="button" id="btn3" value="英語">
<input type="button" id="btn4" value="仏語">
</div>
replaceWith メソッドで「$(A).replaceWith(B);
」と記述して実行される処理内容は、replaceAll メソッドでは「$(B).replaceAll(A);
」と記述します。
jQueryの replaceWith メソッドと replaceAll メソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.