类型安全 HTML DSL

kotlinx.html库提供了使用静态类型 HTML 构建器生成 DOM（文档对象模型）元素的能力（除了 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（文档对象模型）将以直截了当的方式组装。通过使用浏览器的开发者工具检查网站的 Elements（元素），可以轻松确认这一点：

要详细了解kotlinx.html库，请查看 GitHub Wiki，您可以在其中找到更多信息，例如如何创建元素而无需将其添加到 DOM（文档对象模型）中、绑定到事件（如 onClick），以及如何向 HTML 元素应用 CSS 类的示例等。