Re: Simplifying element creation

On Sun, Nov 13, 2011 at 7:41 PM, Ryosuke Niwa <rniwa@webkit.org> wrote:

> I've started playing with create/append and they seem to work pretty well.
>
> It simplified
>     var table = document.createElement('table');
>     table.appendChild(document.createElement('tbody'));
> ...
>     for (var i = 0; i < labels.length; i++) {
>         var tableRow = document.createElement('tr');
>         var titleCell = document.createElement('td');
>         titleCell.appendChild(document.createTextNode(labels[i]));
>         tableRow.appendChild(titleCell);
>
>         var valueCell = document.createElement('td');
>         var bar = document.createElement('span');
>         bar.className = 'bar';
>         bar.style.width = <some expression> + '%';
>         valueCell.appendChild(bar);
>
>         var valueContainer = document.createElement('span');
>         valueContainer.appendChild(document.createTextNode(values[i]));
>         valueContainer.className = 'value-container';
>         valueCell.appendChild(valueContainer);
>         tableRow.appendChild(valueCell);
>         table.childNodes[0].appendChild(tableRow);
>     }
>     element.appendChild(table);
> to
>     var table = Element.create('table', {}, [Element.create('tbody')]);
> ...
>     for (var i = 0; i < labels.length; i++) {
>         table.childNodes[0].append(
>             Element.create('tr', {}, [
>                 Element.create('td', {}, [labels[i]]),
>                 Element.create('td', {}, [
>                     Element.create('span', {'class': 'bar', 'style':
> 'width: ' + <same expression> + '%'}),
>                     Element.create('span', {'class': 'value-container'},
> [values[i]])])
>                 ])
>         );
>     }
>     element.appendChild(table);
>

With a browser-provided html quasi-literal, this could be:

var table = html'<table><tbody></tbody></table>';
for (var i = 0; i < labels.length; i++) {
    table.childNodes[0].append(html'<tr>
        <td>${labels[i]}</td>
        <td>
            <span class="bar" style="width:${some expression}%"></span>
            <span class="value-container">${values[i]}</span>
        </td>
    </tr>');
}
element.append(table);

This seems considerably more readable and concise to me and is certainly
more friendly towards the hoards of jquery developers.

Some important things that were less clear when others were proposing
quasi-literals as the solution to this problem:
1. The browser can provide the "html" quasi function and have it use the
browsers html parser.
2. quasis can return anything. So in this case, the return value would be a
DOM tree, *not* a string.


> My only complain will be that I had to serialize style attribute. I want
> to be able to do:
> Element.create('span', {'class': 'bar', 'style': {'width': <same
> expression> + '%'}})
> instead.
>
> - Ryosuke
>
>