💡

append、prepend

2024/05/02に公開

append()

$('#messages').append('<%= j(render 'message', chat: @chat) %>')

は下につく

指定された要素の内容の最後に新しいコンテンツを追加します。

この場合、**$('#messages')**要素の最後に新しいメッセージが追加されます。

つまり、既存の内容の後に新しいHTMLが挿入されるため、
リストやチャットの履歴に新しいメッセージを追加するのに適しています

$('#messages').prepend('<%= j(render 'message', chat: @chat) %>')

は、上につく
prepend()
メソッドは、指定された要素の内容の最初に新しいコンテンツを追加。

この場合、
$('#messages')要素の最初に新しいメッセージが追加されます。これは、リストやチャットの履歴の最初に新しいエントリを追加するのに適しています

図で作成するとこんな形です。

ちなみに、
$('#messages').html('<%= j(render 'message', chat: @chat) %>')

は新しいHTMLが作成される

メソッドは、指定された要素の内容を新しい内容で完全に置き換えます。この場合、

messageの現在の内容が、新しいメッセージで完全に置き換えられます。
これは、要素の内容を更新する際に使用され、既存の内容は削除されます

より詳しい記事はこちら
https://webukatu.com/wordpress/blog/27163/

Discussion