npm package: @rickard.antonsson/create-element
Description: For fun I created this little element create function. Just a simple wrapper around document.createElement with some recursiveness.
Latest version: 1.2.0

# 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.

```typescript 
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
```javascript
    import { createElement as e } from 'https://cdn.jsdelivr.net/npm/@rickard.antonsson/create-element@1.0.1/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

```html
<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

```html
<script type="module">
    import { createElement as e } from 'https://cdn.jsdelivr.net/npm/@rickard.antonsson/create-element@1.0.1/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

```html
<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

```html
<script type="module">

    import { createElement as e } from "https://cdn.jsdelivr.net/npm/@rickard.antonsson/create-element@1.0.1/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
```html
  <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
```javascript
c('a#some-id.class1.class2.class3{Some text 😀}');
```

html output
```html
<a id="some-id" class="class1 class2 class3">Some text 😀</a>
```