Variadic Element#append (like HTML DOM)

[kungfooman]

Is your feature request related to a problem? Please describe.

I'm always frustrated when I have to write multiple lines to append a few elements and text nodes. 😓

Describe the solution you'd like

A clear and concise description of what I want to happen is this:

pcui.Container.prototype.appendMany = function() {
    for (let i=0; i<arguments.length; i++) {
        let arg = arguments[i];
        let node;
        if (typeof arg === 'string') {
            node = new pcui.Label({text: arg});
        } else {
            node = arg;
        }
        this.append(node);
    }
}

Which would be used like:

var key = document.createElement('code');
key.innerText = "pos";
var val = document.createElement('code');
val.innerText = '{x: 1, y: 2, z: 3}';

Appending everything with a single call while generating labels on the fly:

this.container.appendMany("Key: ", key, "Value: ", val);

It would create something like:

Describe alternatives you've considered

        this.container.append(new pcui.Label({text:"Key: "}));
        this.container.append(key);
        this.container.append(new pcui.Label({text:"Value: "}));
        this.container.append(val);

This would mirror the original HTML DOM API specification, which would make pcui elements feel more natural (at least to me 😅).

Original HTML DOM API: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append