W3C home > Mailing lists > Public > www-dom@w3.org > October to December 2011

Re: Simplifying element creation

From: Ojan Vafai <ojan@chromium.org>
Date: Mon, 14 Nov 2011 16:04:04 -0800
Message-ID: <CANMdWTswt_9xdpgtsquQDYf5ze4E0kwrKo_y9+=azi6N+t5_BA@mail.gmail.com>
To: Ryosuke Niwa <rniwa@webkit.org>
Cc: Anne van Kesteren <annevk@opera.com>, "www-dom@w3.org" <www-dom@w3.org>
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
>
>
Received on Tuesday, 15 November 2011 00:05:01 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:08 GMT