
スキルアップ
2021.03.02
プログラミングに向いている人の特徴5つ!向いていない人の特徴も紹介
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
jQuery
2018.09.29
要素の置き換えを行うメソッドとして JavaScript には replace メソッドがありますが、jQuery には replaceWith メソッドと replaceAll メソッドがあります( JavaScript の replace メソッドも使用できます )。
今回は、jQuery の replaceWith メソッド及び replaceAll メソッドの使用方法について紹介します。
尚、replace メソッドの使用方法については、以下のページをご参照下さい。
JavaScript【 replace 】1 ~ 文字列の置換
JavaScript【 replace 】2 ~ メタ文字を使用した置換
JavaScript【 replace 】3 ~ 様々な置換方法
1.replaceWith メソッド
2.replaceAll メソッド
3.replaceWith の使用方法
4.replaceAll の使用方法
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); 」と記述します。
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
卒業生インタビュー
2021.02.17
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社アールピーシー プログラマカレッジ卒業生の岡嶋さんにお話しをお伺いしました! 目次 仕事は楽しかったし、やりがいもあった。そ […]
お知らせ
2021.02.09
※※当イベントは、募集を終了いたしました。沢山のご応募ありがとうございました。 既にお申込みいただいている方には順次メールにて当日のご案内をお送りしております。当日15時までにメールが確認できない場合は、お問い合わせまで […]
INTERNOUS,inc. All rights reserved.