Create some dynamic content

We can start with a pretty simple example:

1. We init hogosuru

2. We get the current document

3. We get the current body and clean it

4. We create a div

5. We create a button and a span and attach to the div

6. We configure button to log in console with debug level when click

7. Then we attach the div to the body

The code will be:

func main() {
	hogosuru.Init()

	c, _ := console.New()

	// we get the current document
	if doc, err := document.New(); hogosuru.AssertErr(err) {

		//we get the current body
		if body := doc.Body_(); hogosuru.AssertErr(err) {

			//we empty all things in body
			body.SetTextContent("")

			//we create a div
			if div, err := htmldivelement.New(doc); hogosuru.AssertErr(err) {

				//we create a button and a span with text
				if span, err := htmlspanelement.New(doc); hogosuru.AssertErr(err) {
					span.SetTextContent("Please click on this button")
					span.SetID("spanwithtext")
					div.Append(span.Element)
				}

				//we create a button and a span with text
				if button, err := htmlbuttonelement.New(doc); hogosuru.AssertErr(err) {
					button.SetTextContent("click on this button")
					button.SetID("mycustombutton")
					button.OnClick(func(e event.Event) {

						c.Debug("You click on this button")
					})
					div.Append(button.Element)
				}

				//we attach div to the body

				body.Append(div.Element)

			}

		}

	}

	ch := make(chan struct{})
	<-ch

}

Then we run it with headless off (we want see the browser and interact with it)

 WASM_HEADLESS=off GOOS=js GOARCH=wasm go run dynamiccontent/main.go

We can now verify the result is as expected and the dom is like we want 👍

We click on button and the expect result is a log in verbose level:🎉

You can now begin to play with all html components available. Hogosuru support 100% of the components available in HTML5:

The HTML DOM API - Web APIs | MDNMDN Web Docs