当使用 kotlinx.html 的 DSL 创建 HTML 时，（如何）可以引用创建的元素？

Question

我正在用 Kotlin/JS 编写一个浏览器应用程序，并使用kotlinx.htmlDSL 来生成一些 HTML。对于（一个简单的）例子：

\n

(window.document.body!! as Node).append {\n    p {\n        +"Some text"\n    }\n    p {\n        +"Click here"\n        onClickFunction = { event ->\n            <Do some stuff here...>\n        }\n    }\n}\n

\n

现在我的问题是我希望能够引用此代码创建的元素。例如，假设当用户单击第二个p元素（其中有一个单击事件处理程序）时，我想对第一个元素执行某些操作p（例如更改其文本）。有没有一种优雅的方法来做到这一点？

\n

我知道我可以以某种方式找到该元素（例如，通过给它一个 ID，然后查找它，或者依靠它的位置或其他东西），并且我可以在事件处理程序中执行此操作，或者如果我愿意，可以在某些中执行此操作其他代码将在创建元素后运行 \xe2\x80\x93 但仍作为初始化 \xe2\x80\x93 的一部分，并将在事件处理程序随后可以使用的某个变量中保存对该元素的引用。但是，当我的代码在那里定义该元素时，做类似的事情感觉像是一种解决方法，因此我正在寻找一种方法来获取对该元素的引用，作为构建它的过程的一部分（如果可能的话）。

\n

Answer 1

DSL 方法还返回它们创建的 DOM 对象，因此您可以将它们分配给变量并稍后使用：

(window.document.body!! as Node).append {
    val firstP = p {
        +"Some text"
    }
    p {
        +"Click here"
        onClickFunction = { event ->
            firstP.textContent = "Clicked"
        }
    }
}