jQueryのreplaceWith()とhtml()の違いは何ですか?


145

HTMLがパラメーターとして渡されているときのjQueryのreplaceWith()関数とhtml()関数の違いは何ですか?


2
これは私を助けました!私はjqueryを使用してラベルのテキストを動的に変更しようとしていましたが、このスレッドは間違いなく役に立ちました。ありがとう!
HereToLearn_

回答:


289

次のHTMLコードを見てください。

<div id="mydiv">Hello World</div>

実行:

$('#mydiv').html('Aloha World');

結果は:

<div id="mydiv">Aloha World</div>

実行:

$('#mydiv').replaceWith('Aloha World');

結果は:

Aloha World

したがって、html()は要素のコンテンツを置き換え、replaceWith()は実際の要素を置き換えます。


1
いい説明だ!
Luis Gouveia 2016

31

replaceWith()は現在の要素を置き換えますが、html()は単にコンテンツを置き換えます。

replaceWith()は実際に要素を削除するのではなく、単にDOMから要素を削除して、コレクションでそれを返すことに注意してください。

ピーターの例:http : //jsbin.com/ofirip/2


3
+1は、replaceWith()が実際に要素を削除しないことを書き留めておくと非常に便利です。私はこれを理解していませんでした!
Peter

2
それは本当です、それはまだ存在しています。これはDOMにはないため、表示されませんが、HTMLの有効な部分です。証明:jsbin.com/ofirip/2
cgp

1
はい、その通りです。例を上げてくれてありがとう。私はそれをDOM(およびガベージコレクション)から削除することを、私の視点からの基本的な削除として考えていました。しかし、あなたは技術的に正しいです。私は削除し-1ます。うまくいけば、これはすべての人に役立つでしょう。:)
Peter

1
メモをありがとう、古い要素を返すreplaceWith()はデバッグのフラストレーションを私に与えました:(
dain

2
ええ、私はこれを少なくとも30分間戦っています、私は関数が置き換えられた要素を返すことに気付きました、私はこのようなコードで新しい要素を返すと期待していました: 置き換え前の要素が含まれているvar $form = $target.closest('tr').replaceWith(html) ことが$formわかりました。ため息
Pawel Krakowiak

5

html()およびreplaceWith()Jquery関数を使用するには2つの方法があります。

<div id="test_id">
   <p>My Content</p>
</div>

1.)html()とreplaceWith()

var html = $('#test_id p').html(); 「マイコンテンツ」を返します

しかし、 var replaceWith = $('#test_id p').replaceWith();はのDOMオブジェクト全体を返します <p>My Content</p>


2.)html( 'value')vs replaceWith( 'value')

$('#test_id p').html('<h1>H1 content</h1>'); 次の出力を提供します。

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

しかし、これ $('#test_id p').replaceWith('<h1>H1 content</h1>');はあなたに次の出力を与えます。

<div id="test_id">
      <h1>H1 content</h1>
</div>

2

古い質問ですが、これは誰かを助けるかもしれません。

HTMLが有効でない場合、Internet ExplorerとChrome / Firefoxでのこれらの機能の動作にはいくつかの違いがあります。

HTMLをクリーンアップすると、ドキュメントどおりに機能します。

(私の</center>費用を閉じないで私の夜!)


6
そのため、centerを使用しないでください。:p
Romain Tribes

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.