Computer scienceProgramming languagesKotlinAdvanced featuresMultiplatform

kotlinx.html

Theory

HTML DSL inserting

Report a typo

We have this template:

val myDocument = document { }
myDocument.append {
    html {
        body {
            attributes["id"] = "insertHere"
            h1 {
                +"MyDiv: "
            }
        }
    }
}

What code should be placed below so that you see the following output in the console:

<!DOCTYPE html>
<html>
  <body id="insertHere">
    <h1>MyDiv: </h1>
    <div>
      <b><del>some text1</del></b>
      <i><ins>some text2</ins></i>
    </div>
  </body>
</html>

1)

val newDiv = myDocument.createElement("div")
newDiv.append {
    +"<b><del>some text1</del></b>"
    +"<i><ins>some text2</ins></i>"
}
myDocument.getElementById("insertHere").appendChild(newDiv)
println(myDocument.serialize())

2)

val newDiv = myDocument.createElement("div")
newDiv.append {
    i {
        ins {
            +"some text1"
        }
    }
    b {
        del {
            +"some text2"
        }
    }
}
myDocument.getElementById("insertHere").appendChild(newDiv)
println(myDocument.serialize())

3)

val newDiv = myDocument.createElement("div")
newDiv.append {
    div {
        +"<b><del>some text1</del></b>"
        +"<i><ins>some text2</ins></i>"
    }
}
myDocument.getElementById("insertHere").appendChild(newDiv)
println(myDocument.serialize())

4)

val newDiv = myDocument.createElement("div")
newDiv.append {
    b {
        del {
            +"some text1"
        }
    }
    i {
        ins {
            +"some text2"
        }
    }
}
myDocument.getElementById("insertHere").appendChild(newDiv)
println(myDocument.serialize())

5)

val newDiv = myDocument.createElement("div")
newDiv.append {
    div {
        +"<i><ins>some text1</ins></i>"
        +"<b><del>some text2</del></b>"
    }
}
myDocument.getElementById("insertHere").appendChild(newDiv)
println(myDocument.serialize())

You can run these code snippets in the IDE and see the results.

Select one option from the list
___

Create a free account to access the full topic