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

Re: Simplifying element creation

From: Ryosuke Niwa <rniwa@webkit.org>
Date: Sun, 13 Nov 2011 19:41:58 -0800
Message-ID: <CABNRm60tM+5ahoZEXfibfAg+A1hp3DaZCxECAkDr-CUm=2p1Yg@mail.gmail.com>
To: Anne van Kesteren <annevk@opera.com>
Cc: "www-dom@w3.org" <www-dom@w3.org>
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);

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 Monday, 14 November 2011 03:42:47 GMT

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