replaceWithとは
- ここで説明するreplaceWith とは次の語句からなるjQueryのメソッドです。
- replace
- 読み: リプレイス
意味: 置き換える、取り換える - with
- 読み: ウィズ
意味: ～と、～とともに
replaceWithメソッドの概要
このメソッドは引数に指定した値で既存のテキストや要素などと置き換えすることができます。
新規定義のテキストや要素を作成して置換値とすることもできますし、既存の要素を指定して置換値にすることもできます。 既存の要素を置換値とした場合、その要素のコピーではなく、その要素自体がターゲットの位置に移動することになります。
このメソッドには、類似したメソッドとして replaceAll メソッドがあります。どちらも基本的な動作は同じといえますが、コードの記述方法が異なります。
構文
サンプルを見る前に構文を確認しておきます。
$(target).replaceWith(newContent);
$(target).replaceWith(function(){return newContent});
サンプルコードと実行結果
ここで紹介するサンプルコードはreplaceWith()の基本的な使い方になります。 jQオブジェクトから参照した要素やノードをreplaceWith(引数)の引数に与えた値に置き換えることになります。
実践: テキストで置き換える
表題では「テキストで置き換える」としましたが、単純にテキストだけでなく、テキストにHTMLタグを含めれば エレメントノードとしても置き換えることが可能です。
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p><output id="idAnswer">innerText</output></p>
<p><input type="button" value="replaceWith : 置き換える" id="idButton"></p>
</body>
- 05: output要素 (この要素をreplaceWithを使って置き換えます)
- 06: input要素 (ボタンです。クリックすると置換が実行されます)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("#idAnswer").replaceWith('<output id="idAnswer">HELLO WORLD</output>')
});
</script>
- 02: clickメソッド (idButtonがクリックされると関数を呼び出します)
- 03: 関数の内容 (idAnswerをreplaceWithの引数で置き換えます)
答え: id="idAnswer"
実行:
リセット:
実践: 引数に関数を指定する(コールバック)
replaceWithの引数には関数の戻り値を使うことができます。 ここでは今日の年月日を文字列として返す関数を作成して、その結果の値を含めたエレメントノード に置換しています。
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p><output id="idAnswer">innerText</output></p>
<p><input type="button" value="replaceWith : 置き換える" id="idButton"></p>
</body>
- 05: output要素 (この要素をreplaceWithを使って置き換えます)
- 06: input要素 (ボタンです。クリックするとidAnswerの置換が実行されます)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("#idAnswer").replaceWith(function(){
let objDate = new Date();
return '<output id="idAnswer">' +
objDate.getFullYear() + '年' +
(objDate.getMonth() + 1) + '月' +
objDate.getDate() + '日</output>'
;
});
});
</script>
- 02: clickメソッド (idButtonがクリックされると関数を呼び出します)
- 03: replaceWithメソッド (idAnswerを置換するための引数に関数を呼び出します)
- 04-09: 関数の内容(これがreplaceWithメソッドの引数になる)
- 04: objDateにコンストラクタでDateオブジェクトのインスタンスを生成します
- 05: return (以降の処理結果を関数の戻り値として返します)
- 06: objDateから年の値を取得します
- 07: objDateから月の値を取得します
- 08: objDateから日の値を取得します
- 09: ;
答え: id="idAnswer"
実行:
リセット: