Типобезопасный HTML DSL

Библиотека kotlinx.html позволяет создавать элементы DOM с помощью HTML-билдеров со статической типизацией (и, помимо JavaScript, она также доступна для целевой платформы JVM!). Чтобы использовать библиотеку, добавьте соответствующий репозиторий и зависимость в файл build.gradle.kts:

repositories {
    // ...
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.8.0")
    // ...
}

После добавления зависимости вы сможете использовать различные интерфейсы для создания DOM. Например, следующий фрагмент кода позволяет вывести заголовок, текст и ссылку:

import kotlinx.browser.*
import kotlinx.html.*
import kotlinx.html.dom.*

fun main() {
    document.body!!.append.div {
        h1 {
            +"Welcome to Kotlin/JS!"
        }
        p {
            +"Fancy joining this year's "
            a("https://kotlinconf.com/") {
                +"KotlinConf"
            }
            +"?"
        }
    }
}

При запуске этого примера в браузере DOM будет собран простым способом. Это легко проверить, открыв вкладку «Элементы» сайта с помощью инструментов разработчика браузера:

Чтобы узнать больше о библиотеке kotlinx.html, ознакомьтесь с вики на GitHub, где вы найдете дополнительную информацию о том, как создавать элементы, не добавляя их в DOM, привязывать обработчики событий, таких как onClick, а также примеры того, как применять CSS-классы к элементам HTML, и многое другое.