Hey. One more (stupid) question: I have a org.w3c.dom.HTMLDivElement. How can I add this to a kvisio...

# kvision

[jschneider]

Hey. One more (stupid) question: I have a org.w3c.dom.HTMLDivElement. How can I add this to a kvision div?

[Robert Jaros]

you need to get access to the native dom element inside afterInsertHook

val el = document.createElement("div")
        el.textContent = "test"
        root("kvapp") {
            div {
                addAfterInsertHook {
                    getElement()?.appendChild(el)
                }
            }
        }

[jschneider]

Very well. Maybe an extension method would be great for that?

[Robert Jaros]

You can do this directly if you are sure the element is rendered:

val el = document.createElement("div")
        el.textContent = "test"
        root("kvapp") {
            val div = div {
                +"some content"
            }
            button("test").onClick {
                div.getElement()?.appendChild(el)
            }
        }

[Robert Jaros]

Direct access to the DOM is possible but you need to be careful because KVision works with virtual dom and your direct changes will disappear (e.g. after hiding and showing again):

val el = document.createElement("div")
        el.textContent = "test"
        root("kvapp") {
            val div = div {
                +"some content"
            }
            button("test").onClick {
                div.getElement()?.appendChild(el)
            }
            button("toggle visibility").onClick {
                div.toggleVisible()
            }
        }

[Robert Jaros]

I think it should be used explicitly and extension function could hide what's going on and lead to errors.