HOME </> htmx

hx-target

要素をどこに配置するか指定するための属性です。
idやクラスと紐付けることで任意の箇所に変更を加えることが出来ます。

hx-targetを持つ要素が複数存在する場合は、最初に見つかった要素のみが置換されます。

  • ここがターゲット!!
  • ここがターゲット!!
  • ここがターゲット!!
対象のコード
<button hx-get="/sample01.php" hx-target=".target" >クリック!!</button>
置換する対象となるコード
<ul class="test-list">
  <li class="test-item target">ここがターゲット!!</li>
  <li class="test-item target">ここがターゲット!!</li>
  <li class="test-item target">ここがターゲット!!</li>
</ul>
sample01.php
<span style="color: blue;">サンプル1</span>