渲染對象

如果 API 請求後要把 Response 渲染到畫面上，可以使用 hx-target="CSS 選取器" 來指定要渲染到哪個元素上，如果沒有設定這個屬性的話，會直接渲染在觸發 API 事件的元素上，官方範例如下：

// API 的回應會被渲染到 id 是 search-results 的 div 裡面
<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup delay:500ms changed"
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

延伸選取器

hx-target 提供了一些特別的 keyword 來達成其他的選取方式

• this: 表示有 hx-target 属性的元素就是目標元素。
• closest <CSS selector>: 離 CSS 選取器 最近的父元素或是本身。
• next <CSS selector>: CSS 選取器 選到元素的下一個元素。
• previous <CSS selector>: CSS 選取器 選到元素的前一個元素。
• find <CSS selector>: CSS 選取器 選到元素的第一個子元素。

渲染方式

使用 hx-swap 來決定選染到指定元素的方式，有幾種方式可以使用：

• innerHTML: 預設值，渲染在指定元素內。
• outerHTML: Response 的內容會取代指定元素。
• afterbegin: 渲染到指定元素的子層，在第一個子元素之前。
• beforebegin: 選染到指定元素的父層，在指定元素之前。
• beforeend: 渲染到指定元素的子層，在最後一個子元素之後。
• afterend: 選染到指定元素的父層，在指定元素之後。
• delete: 不管回傳什麼都會把指定元素移除。
• none: 不渲染。