Convenient way to create element and set its attributes at once

• From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
• Date: Fri, 22 Nov 2013 03:48:08 +0400
• To: "www-dom@w3.org" <www-dom@w3.org>
• Message-Id: <136321385077688@web17h.yandex.ru>

Hello.

Creating an element via DOM is often followed by setting its attributes one by one:

    var input = document.createElement('input');
    input.setAttribute('type', 'email');
    input.setAttribute('name', 'foo');
    input.setAttribute('size', 100);
    input.setAttribute('placeholder', 'Some placeholder text');
    input.setAttribute('required', '');

It may make sense to make such general sequence of operations more convenient/nonredundant by extending the existing `document.createElement()` method with optional second parameter that could be used to pass element's attributes' map (key-value pairs as an Object):

    var input = document.createElement('input', {
        'type' : 'email',
        'name' : 'foo',
        'size' : 50,
        'placeholder' : 'e.g. example@example.com',
        'required'    : ''
    });

    var a = document.createElement('a', {
        'href'  : '/example/',
        'title' : 'Example link'
    });

    var label = document.createElement('label', {
        'for' : 'some-field'
    });

Also, `element.setAttribute()` method could be extended to make it possible to set multiple attributes at once by accepting key-value map of attributes and their values as the first and only argument:

    element.setAttribute({
        'id'     : 'foo',
        'class'  : 'lorem ipsum dolor',
        'data-i' : 42
    });

Thanks.

Received on Thursday, 21 November 2013 23:48:52 UTC