Create Element - Minimal element creator

Why?

For fun I created this little element create function. Just a simple wrapper around document.createElement with some recursiveness.

It allows adding events and more quite easily.

The idea is a function, named createElement (aliased c) that can sortof act almost like jsx but without a buildstep. The id and classes are optional.

Children is an array that takes an array of things that gets appended to the parent.

c('some-tag#some-id.some-class', /* optional */ element => { 
  /* do stuff to element (add eventhandlers?) */ 
  element.addEventListener('click', console.log);
}, children);

1.1.1 Added simple emmet analogs for id, classes and text, se example 4

Couldn't we just use string template literals?

Ehm, yes. For most that might be the better choice. I like this since you can add eventhandlers and other things to element without having to querySelector for it.

Size

No more than 1kb when loaded from jsdelivr

Code

Example 1, basic

    import { createElement as e } from 'https://cdn.jsdelivr.net/npm/@rickard.antonsson/[email protected]/dist/create-element.min.js'

    const clickableDiv = e('div', i => {
      i.onclick = () => console.log('clicked the example div');
      i.textContent = 'Click me';
    });
    const divWithChildren = e('div', [e('span', ['First span'])])
    const divWithChildrenAndClassname = e('div', i => i.className = 'blue-div', [e('span', ['Second span'])])

    document.getElementById('container').append(clickableDiv, divWithChildren, divWithChildrenAndClassname)

html output

<div id="container">
    <div>Click me</div>
    <div><span>First span</span></div>
    <div class="blue-div"><span>Second span</span></div>
</div>

Example 2, simple

<script type="module">
    import { createElement as e } from 'https://cdn.jsdelivr.net/npm/@rickard.antonsson/[email protected]/dist/create-element.min.js'

    const table = e('table', [
      e('thead', [
        e('tr', [
          e('th', ['id']),
          e('th', ['name']),
          e('th', ['image'])
        ]),
      ]),
      e('tbody', [
        e('tr', [
          e('td', ['1']),
          e('td', ['John Dough']),
          e('td', [
            e('img', i => i.src = 'https://someimage.com/man.jpg')
          ])
        ]),
        e('tr', [
          e('td', ['2']),
          e('td', ['Jane Dough']),
          e('td', [
            e('img', i => i.src = 'https://someimage.com/woman.jpg')
          ])
        ]),
      ])
    ]);
    document.getElementById('container').append(table)
  </script>

html output

<div id="container">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>image</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Dough</td>
                <td><img src="https://someimage.com/man.jpg"></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Dough</td>
                <td><img src="https://someimage.com/woman.jpg"></td>
            </tr>
        </tbody>
    </table>
</div>

Example 3, a bit more advanced

<script type="module">

    import { createElement as e } from "https://cdn.jsdelivr.net/npm/@rickard.antonsson/[email protected]/dist/create-element.min.js";

    const persons = [
      { id: 1, name: "John Dough", color: "#adf", age: 33 },
      { id: 2, name: "Jane Dough", color: "#fda", age: 45 },
      { id: 3, name: "Jack Shit", color: "#dff", age: 64 },
      { id: 4, name: "Gina Shit", color: "#aad", age: 21 },
    ];

    const tbody = e("tbody");
    tbody.append(...persons.map(createTableRow));

    const table = e("table", [
      e("thead", [
        e("tr", (i) => (i.onclick = handleSort), [
          e("th", ["id"]),
          e("th", ["name"]),
          e("th", ["age"]),
        ]),
      ]),
      tbody,
    ]);

    document.getElementById("container").append(table);

    function handleSort(e) {
      persons.sort((a, b) => a.name.localeCompare(b.name));
      tbody.innerHTML = "";
      tbody.append(...persons.map(createTableRow));
    }

    function createTableRow(person) {
      const style = `background:${person.color}; border-radius: 50%; width:20px; height:20px; text-align:center`;
      return e("tr", [
        e("td", [
          e("div", (i) => {
            i.style = style;
            i.textContent = person.id;
          }),
        ]),
        e("td", [person.name]),
        e("td", [person.age]),
      ]);
    }
  </script>

html output

  <div id="container">
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div
                        style="background: rgb(170, 170, 221); border-radius: 50%; width: 20px; height: 20px; text-align: center;">
                        4</div>
                </td>
                <td>Gina Shit</td>
                <td>21</td>
            </tr>
            <tr>
                <td>
                    <div
                        style="background: rgb(221, 255, 255); border-radius: 50%; width: 20px; height: 20px; text-align: center;">
                        3</div>
                </td>
                <td>Jack Shit</td>
                <td>64</td>
            </tr>
            <tr>
                <td>
                    <div
                        style="background: rgb(255, 221, 170); border-radius: 50%; width: 20px; height: 20px; text-align: center;">
                        2</div>
                </td>
                <td>Jane Dough</td>
                <td>45</td>
            </tr>
            <tr>
                <td>
                    <div
                        style="background: rgb(170, 221, 255); border-radius: 50%; width: 20px; height: 20px; text-align: center;">
                        1</div>
                </td>
                <td>John Dough</td>
                <td>33</td>
            </tr>
        </tbody>
    </table>
</div>

Example 4

c('a#some-id.class1.class2.class3{Some text 😀}');

html output

<a id="some-id" class="class1 class2 class3">Some text 😀</a>