jQuery replaceWithで要素を置き換えるサンプル
環境
jquery3.6.3
Google Chrome 111.0.5563.65(Official Build)
書式
$(置換対象).replaceWith(置換後の要素)
replaceWithは、要素を置換えます。
replaceAllとの違いは、置換対象と置換後の要素が逆です。
$()はjQueryオブジェクトです。
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnchk").click(function() { $("#city").replaceWith('<span id = "city">tokyo777</span>'); }); }); </script> </head> <body> <p>テスト:<span id = "city">東京</span></p> <input type="button" id="btnchk" value="変更"> </body> </html>
実行結果
ボタン「変更」を押すと、文字が「東京」を「tokyo777」に変わります。