Attach to existing content

We have seen how to create dynamic components and it works like a charm. However most of the times, it's very difficult and need lots of time and code to build from scratch

A more easy way is create your html contents load it on your pages and just attach the "functional code" on each components.

We use the same code as string and inject HTML in a specific place of the HTML.

We get and convert each HTML components to the respective GO instance attach function.

<div>
  <span id="myspantextid"></span>
  <button id="mybuttonid"></button>
</div>

When the page loads we inject the html code above in body. Then search each component by their ID and SetContent with a click evenement on button.

If you have read Load and parse a JSON data you have understand you can fetch this ressource remote and use it in the same way. Don't forget that if you fetch a remote HTML contents, you must ensure that the source is trusted to avoid xss injection ( For more information: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML )

var domhtml = `<div>
<span id="myspantextid"></span>
<button id="mybuttonid"></button>
</div>`

func GetSpanByID(elemsearch element.Element, ID string) (htmlspanelement.HtmlSpanElement, error) {
	var e htmlspanelement.HtmlSpanElement
	var err error
	var elem node.Node
	var elemInstance interface{}
	var ok bool
	if elem, err = elemsearch.QuerySelector(ID); hogosuru.AssertErr(err) {

		if elemInstance, err = elem.Discover(); hogosuru.AssertErr(err) {

			if e, ok = elemInstance.(htmlspanelement.HtmlSpanElement); !ok {
				err = errors.New(ID + " is not a span")
			}
		}

	}
	return e, err
}

func GetButtonByID(elemsearch element.Element, ID string) (htmlbuttonelement.HtmlButtonElement, error) {
	var e htmlbuttonelement.HtmlButtonElement
	var err error
	var elem node.Node
	var elemInstance interface{}
	var ok bool
	if elem, err = elemsearch.QuerySelector(ID); hogosuru.AssertErr(err) {

		if elemInstance, err = elem.Discover(); hogosuru.AssertErr(err) {

			if e, ok = elemInstance.(htmlbuttonelement.HtmlButtonElement); !ok {
				err = errors.New(ID + " is not a button")
			}
		}

	}
	return e, err
}

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) {
			//be carefull use a sanytiser to prevent xss if you're not trust the src
			body.SetInnerHTML(domhtml)

			//search the element name "myspantextid" in the body

			if span, err := GetSpanByID(body.Element, "#myspantextid"); hogosuru.AssertErr(err) {

				span.SetTextContent("Please click here :)")
			}

			if button, err := GetButtonByID(body.Element, "#mybuttonid"); hogosuru.AssertErr(err) {

				button.SetTextContent("The text button content")
				button.OnClick(func(e event.Event) {
					c.Debug("You click on this button")
				})
			}

		}

	}

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

}

Let's take a closer look at the code

The QuerySelector is used to find an element in the elemsearch. The return value can be an object. The return value is not known. We use the special "Discover" method to ask "hogorusu" it this element bound by hogosuru. If yes, the correspond instance is returned and you must ensure that the element have the good type with assertion type.

	if elem, err = elemsearch.QuerySelector(ID); hogosuru.AssertErr(err) {

		if elemInstance, err = elem.Discover(); hogosuru.AssertErr(err) {

			if e, ok = elemInstance.(htmlbuttonelement.HtmlButtonElement); !ok {

Discover can found an object only if this object has been seen before. Thanks to Go and 'init" function , if you want use "assertion type" the correspondant lib is included in your project and the components is known because it's loaded on "init".