js STUDIO

.replaceWith()

要素を指定された別のエレメントやHTMLと差し替えます。

.replaceWith()は.replaceWith()と本質的には同じ動作をします。 この2つの違いは、指定する要素と対象の位置が反対であることです。

.replaceWith(newContent) 1.2追加

戻り値:jQuery

引数 説明
newContent 置換する要素を指定します。HTML文字列、DOM要素、jQueryオブジェクトが指定できます。

.replaceWith(function) 1.4追加

戻り値:jQuery

引数 説明
function 置換する要素を戻り値として返す関数を指定します。

containerクラスのDIV要素を、自身のDIV要素内の子要素に置換します。 戻り値は、HTML文字列、DOM要素、jQueryオブジェクトのいずれかになるようにします。 

$('div.container').replaceWith(function() {
  return $(this).contents();
});

補足事項

.replaceWith()は他の多くのjQueryメソッドと同じくjQueryオブジェクトを返し、 それによってメソッドチェーンが可能となります。 ただし、.replaceWith()が返すjQueryオブジェクトの参照先は削除されたDOMであり、 新しく置換された要素では無いことに注意してください！

jQuery1.4から.replaceWith()はDOMノードから切断されている状態でも動作することが出来るようになりました。 例えば、下記のコードはP要素を内包するjQueryオブジェクトを返します。 

$("<div/>").replaceWith("<p></p>");

サンプル

次のようなコードがあった場合、 

<div class="container">
  <div class="inner first">こんにちは！</div>
  <div class="inner second">そして</div>
  <div class="inner third">さようなら！</div>
</div>

2番目のDIVを下記の処理で置換します。

$('div.second').replaceWith('<h2>新しい見出し</h2>');

結果は次のようになります。

<div class="container">
  <div class="inner first">こんにちは！</div>
  <h2>新しい見出し</h2>
  <div class="inner third">さようなら！</div>
</div>

全てのDIV要素を対象とした場合、

$('div.inner').replaceWith('<h2>New heading</h2>');

一括で全てのDIV要素が置換されます。

<div class="container">
  <h2>新しい見出し</h2>
  <h2>新しい見出し</h2>
  <h2>新しい見出し</h2>
</div>

また、次のように存在する要素を指定した場合、移動と置換の処理が一括で実行されます。 コピーが作られないことに注目してください。 

$('div.third').replaceWith($('.first'));

結果は次のようになります。

<div class="container">
  <div class="inner second">そして</div>
  <div class="inner first">こんにちは！</div>
</div>

デモ

ボタンをクリックすると、テキストをそのまま流用してDIV要素に置換します。 

<!DOCTYPE html>
<html>
<head>
<style>
  button { display:block; margin:3px; color:red; width:200px; }
  div { color:red; border:2px solid blue; width:200px;
      margin:3px; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>零号機</button>
<button>１号機</button>
<button>２号機</button>
<script>
$("button").click(function () {
  $(this).replaceWith( "<div>" + $(this).text() + "</div>" );
});
</script>
</body>
</html>

全てのP要素をBold要素のコンテンツに置換します。 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>おはよう！</p>
  <p>こんにちは！</p>
  <p>こんばんは！</p>
<script>
  $("p").replaceWith( "<b>さようなら!</b>" );
</script>
</body>
</html>

各P要素の置換対象をDOMノード内に存在するDIV要素とします。 この場合、DIV要素はコピーされずその都度置換と移動が発生していることを確認してください。 

<!DOCTYPE html>
<html>
<head>
<style>
  div { border:2px solid blue; color:red; margin:3px; }
  p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>おはよう！</p>
  <p>こんにちは！</p>
  <p>こんばんは！</p>
  <div>置換!</div>
<script>
$("p").click(function () {
  $(this).replaceWith( $("div") );
});
</script>
</body>
</html>

ボタンをクリックするとcontainerクラスを持つDIV要素が、自身を自身の子要素と置換します。 また、自身のクラス名を出力します。 

<!DOCTYPE html>
<html>
<head>
<style>
  .container { background-color: #991; }
  .inner { color: #911; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<button>置換!</button>
</p>
<div class="container">
  <div class="inner">一郎</div>
  <div class="inner">二郎</div>
  <div class="inner">三郎</div>
</div>
<script>
  $('button').bind("click", function() {
  var $container = $("div.container").replaceWith(function() {
    return $(this).contents();
  });
  $("p").append( $container.attr("class") );
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM