Type mismatch, required node, found string

Question

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:

What mistake I;m doing here?

Answer 1

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)