hx-swap

hx-swap 属性允许你指定如何相对 AJAX 请求的响应进行交换。如果你未指定该选项，则默认为 htmx.config.defaultSwapStyle(innerHTML)。

该属性可能的值包括：

innerHTML - 替换目标元素的内部 html
outerHTML - 用响应替换整个目标元素
textContent - 替换目标元素的文本内容，而不将响应解析为 HTML
beforebegin - 在目标元素之前插入响应
afterbegin - 将响应插入到目标元素的第一个子元素之前
beforeend - 将响应插入到目标元素的最后一个子元素之后
afterend - 在目标元素后插入响应
delete - 无论响应如何都删除目标元素
none - 不附加响应中的内容（带外项目仍将被处理）。

这些选项基于标准 DOM 命名和 Element.insertAdjacentHTML 规范。

在以下代码中：

  <div hx-get="/example" hx-swap="afterend">Get Some HTML & Append It</div>

div 将向 /example 发出请求并将返回的内容附加到 div

修饰符

属性 hx-swap 支持用于改变交换行为的修饰符。它们概述如下：

过渡：transition

如果你想在发生交换时使用新的 View Transitions API，你可以为交换使用 transition:true 选项。你也可以通过将 htmx.config.globalViewTransitions 配置设置设为 true 来全局启用此功能。

时间安排：swap & settle

你可以通过添加修饰符来修改 htmx 在收到响应后等待交换内容的时间：

  <!-- this will wait 1s before doing the swap after it is received -->
  <div hx-get="/example" hx-swap="innerHTML swap:1s">Get Some HTML & Append It</div>

类似地，你可以通过添加修饰符来修改交换和结算逻辑之间的时间：

  <!-- this will wait 1s before doing the swap after it is received -->
  <div hx-get="/example" hx-swap="innerHTML settle:1s">Get Some HTML & Append It</div>

这些属性可用于将 htmx 与 CSS 过渡效果的时间同步。

标题：ignoreTitle

默认情况下，如果 htmx 在响应内容中找到 <title> 标签，它将更新页面标题。你可以通过将选项设置为 true 来关闭此行为。

滚动：scroll&show

你还可以使用 scroll 和 show 修饰符来更改目标元素的滚动行为，它们均采用值 top 和 bottom ：

  <!-- this fixed-height div will scroll to the bottom of the div after content is appended -->
  <div style="height:200px; overflow: scroll" 
       hx-get="/example" 
       hx-swap="beforeend scroll:bottom">
     Get Some HTML & Append It & Scroll To Bottom
  </div>
  ```

  ```html
  <!-- this will get some content and add it to #another-div, then ensure that the top of #another-div is visible in the 
       viewport -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:top"
       hx-target="#another-div">
    Get Some Content
  </div>

如果你希望针对不同的元素进行滚动或显示，你可以在 scroll 或 show 之后放置一个 CSS 选择器，然后是 :top 或 :bottom：

  <!-- this will get some content and swap it into the current div, then ensure that the top of #another-div is visible in the 
       viewport -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:#another-div:top">
    Get Some Content
  </div>

你还可以使用 window:top 和 window:bottom 滚动到当前窗口的顶部和底部。

  <!-- this will get some content and swap it into the current div, then ensure that the viewport is scrolled to the
       very top -->
  <div hx-get="/example" 
       hx-swap="innerHTML show:window:top">
    Get Some Content
  </div>

对于增强链接和表单，默认行为是 show:top 。你可以使用htmx.config.scrollIntoViewOnBoost 全局禁用它，也可以基于元素使用 hx-swap="show:none" 进行禁用。

<form action="/example" hx-swap="show:none">
  ...
</form>

焦点滚动

htmx 能够在保留 input 元素的焦点。默认情况下，htmx 会阻止在请求之间自动定位到焦点 input 元素，当用户已经滚动离开时，这可能是较长请求中不受欢迎的行为。要启用焦点滚动，你可以使用focus-scroll:true。

<input id="name" hx-get="/validation" 
       hx-swap="outerHTML focus-scroll:true"/>

或者，如果你希望页面在每次请求后自动定位到焦点元素，你可以将 htmx 全局配置 htmx.config.defaultFocusScroll 的值更改为 true。然后针对特定请求禁用它 focus-scroll:false。

  <input id="name" hx-get="/validation" 
       hx-swap="outerHTML focus-scroll:false"/>

笔记

hx-swap 可以继承并放置在父元素上
该属性的默认值为 innerHTML
由于 DOM 限制，无法在元素上使用 outerHTML 方法。htmx 将会把元素上的的 outerHTML 改为 innerHTML。
默认交换延迟为 0ms
默认稳定延迟为 20ms