Implement a class to generate HTML

This is what I want to do

HTMLConstruct.span('foo'); // -> <span>foo</span>
HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div>

HTMLConstruct.div.p(
  HTMLConstruct.span('bar'),
  HTMLConstruct.div.span('baz')
); // -> <div><p><span>bar</span><span>baz</span></p></div>

I made this but it`s not work as it should. I have no idea how to implement it

class TestClass {
  private str: string
  constructor(str?: string) {
    this.str = str || ''
  }
  
  div(str: string): TestClass {
    str = `<div>${str}</div>`
    return new TestClass(str)
  }
}