jQuery - 要素の置換
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
指定した要素を別の要素に置換します。
replaceWith() と replaceAll() は、実行するオブジェクトと引数が逆になるだけで、
置換処理自体は同じ動作になります。
但し、どちらも戻り値がメソッドの所有者のオブジェクトとなるため、メソッドチェーンを使った時の動作が異なります。
$(検索要素).replaceWith(置換要素)
$(置換要素).replaceAll (検索要素)
replaceWith() と replaceAll() は、実行するオブジェクトと引数が逆になるだけで、
置換処理自体は同じ動作になります。
但し、どちらも戻り値がメソッドの所有者のオブジェクトとなるため、メソッドチェーンを使った時の動作が異なります。
2.1 サンプル - replaceWith()
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
// 検索要素 置換要素
$("#test div").replaceWith("<div>test</div>").css("border","1px solid red");
});
</script>
</body></html>
実行結果：画面
2.2 サンプル - replaceAll()
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="test">
<div id="a1">A-1</div>
<div id="a2">A-2</div>
<div id="a3">A-3</div>
</div>
<!-- Script -->
<script>
$(function() {
// 置換要素 検索要素
$("<div>test</div>").replaceAll($("#test div")).css("border","1px solid red");
});
</script>
</body></html>
実行結果：画面
