ONDrecords【WEBまわりの事をやっております】WEBデザイン・通販システム・予約システムなどが出来ます!

replaceWith()とreplaceAll()

replaceWith()の説明【jQueryメソッド】

「ターゲット属性」と「引数」のhtmlを入れ換えます。

  • $(“ターゲット属性”).replaceWith(引数);
  • $(“ターゲット属性”).replaceWith(function(i,html){
    return 【iはインデックス + htmlは要素の中身 → 戻り値】})

例1)

<div id="test">
<p>あいうえお</p>
</div>
var test = $('#test p');
test.replaceWith('<h1>あいうえお</h1>');

結果1)

<div id="test">
<h1>あいうえお</h1>
</div>
例2)

<div id="test">
<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>
</div>
$('<ul />').appendTo('#test'); //新規<ul>要素を#testの後ろに追加
$('#test p').appendTo('ul'); //#testの中のp要素をulの中に移動
$('#test p').replaceWith(function(i, html) {
return $('<li>' + (i + 1) + '. ' + html + '</li>');
});

結果2)

<div id="test">
<ul>
<li>1. あいうえお</li>
<li>2. かきくけこ</li>
<li>3. さしすせそ</li>
</ul>
</div>

Copyright © 2013 ONDrecords. All rights reserved.