Skip to content

Complex Example

Jump to bottom
Venkat Peri edited this page Sep 2, 2019 · 1 revision

Markup in Javascript:

const markup = () =>
    html({lang: 'en'}, () => {
        head(() => {
            title('test')
            meta({charset: 'utf-8'})
            link({href: 'style.css', rel: 'stylesheet'})
            style(`
    body {
      color: red;
    } 
    `)
        })
        body(() => {
            h1('header 1')
            h2({class: 'unique'}, 'header 2', () =>
                a({href: "/abc"}, "abc"))
            p('This is a paragraph')
            div({class: 'some-style'}, () => {
                comment(() => div())
                for (let i = 0; i < 6; i++) {
                    div(`div ${i}`, () => span(`span ${i}`))
                }
                p('This is another paragraph')
            })
        })
    })

Generates this HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <style>
    body {
      color: red;
    } 
    </style>
  </head>
  <body>
    <h1>header 1</h1>
    <h2 class="unique">header 2
      <a href="/abc">abc</a>
    </h2>
    <p>This is a paragraph</p>
    <div class="some-style">
      <!--
        <div></div>
      -->
      <div>div 0
        <span>span 0</span>
      </div>
      <div>div 1
        <span>span 1</span>
      </div>
      <div>div 2
        <span>span 2</span>
      </div>
      <div>div 3
        <span>span 3</span>
      </div>
      <div>div 4
        <span>span 4</span>
      </div>
      <div>div 5
        <span>span 5</span>
      </div>
      <p>This is another paragraph</p>
    </div>
  </body>
</html>
Clone this wiki locally