kotlinkotlinx-html

Type mismatch, required node, found string


Trying to use the snippet at Kotlin site under HTML Builder tap, so I wrote the below:

val tbl = createHTML().table {
    for ((num, string) in data) {
        tr {
            td { +"$num" }
            td { +string }
        }
    }
}
document.getElementById("container")!!.appendChild(tbl)

but the IDE is underlying the tbl with error as below:

enter image description here

What mistake I;m doing here?


Solution

  • createHtml() produces a String, which cannot be passed to appendChild(). You should instead use

    val tbl = document.create.table {
        ...
    }
    

    which produces an HTMLElement (which is a Node) or simply skip the variable.

    document.getElementById("container")!!.append.table {
        ...
    }
    

    createHTML().xxx is best used with server Ktor.io where you create something like:

    val html = createHTML().html {
                            body {
                            form(action = "/login", encType = FormEncType.applicationXWwwFormUrlEncoded, method = FormMethod.post) {
                                p {
                                    +"user:"
                                    textInput(name = "user") {
                                        value = principal?.name ?: ""
                                    }
                                }
    
                                p {
                                    +"password:"
                                    passwordInput(name = "pass")
                                }
    
                                p {
                                    submitInput() { value = "Login" }
                                }
                            }
                        }
                    }
    

    Then send it to the browser using:

    call.respondText(html, ContentType.Text.Html)