htmx.swap()

Заменяет HTML-содержимое

Используйте htmx.swap(), чтобы запустить жизненный цикл замены без отправки запроса.

await htmx.swap({
  text: '<p>Done</p>',
  target: '#result'
})

htmx заменяет содержимое в #result, используя стиль замены по умолчанию.

Для запросов используйте htmx.ajax().

Синтаксис

htmx.swap(ctx)

Задайте содержимое, целевой элемент и стиль замены в контексте:

await htmx.swap({
  text: '<p>Done</p>',
  target: '#result',
  swap: 'outerHTML transition:true'
})

HTML-строка для замены.

await htmx.swap({
  text: '<strong>Saved</strong>',
  target: '#status'
})

Целевой элемент или селектор. По умолчанию используется document.body.

await htmx.swap({
  text: 'Saved',
  target: document.querySelector('#status')
})

await htmx.swap({
  text: 'Saved',
  target: '#status'
})

Сериализованное значение hx-swap.

await htmx.swap({
  text: 'Saved',
  target: '#status',
  swap: 'innerHTML transition:true settle:100ms'
})

По умолчанию используется htmx.config.defaultSwap.

Поле	Описание
`sourceElement`	Элемент, используемый для относительных селекторов и событий замены
`select`	Содержимое, выбранное из `text`
`selectOOB`	Внеполосное содержимое, выбранное из `text`
`transition`	Использовать ли переход представления

Задайте sourceElement, если в целевом элементе или модификаторе замены используется относительный селектор:

let button = document.querySelector('#save')

await htmx.swap({
  text: 'Saved',
  target: 'closest .result',
  sourceElement: button
})

Исходный элемент также получает события жизненного цикла замены.

Используйте select, чтобы заменить часть содержимого:

await htmx.swap({
  text: '<p id="message">Saved</p><p>Ignored</p>',
  target: '#status',
  select: '#message'
})

htmx.swap() вызывает:

События замены вызываются для sourceElement. События завершения вызываются для каждой целевой области замены.

htmx.swap() возвращает Promise, который разрешается после завершения замены.

await htmx.swap({
  text: 'Saved',
  target: '#result'
})
console.log('Swap complete')

htmx.swap() обрабатывает основное, внеполосное содержимое и содержимое <hx-partial>.
htmx.swap() не отправляет запрос.