1
\$\begingroup\$

I am trying to create a helper function for myself, and this helper should do the following:

  • Create an element
  • Add properties to the element
  • Set values to the element (this is the concern of my question)
  • Add children nodes to the element

I am trying to emulate the React.js createElement function.

Here's what I have so far--and it works (by the way, I'm using ES6):

createElement: (type, props, children) => {
    let el = document.createElement(type),
        key;

    for (key in props) {
        if (props.hasOwnProperty(key)) {
            if (helpers.shouldAssignVal(key)) {
                el[key] = props[key];
            } else {
                let attr = helpers.camelCaseToDash(key),
                    i = 0;

                if (helpers.isArray(props[key])) {
                    for (i; i < props[key].length; i++) {
                        el.setAttribute(attr, props[key][i]);
                    }
                } else {
                    el.setAttribute(attr, props[key]);
                }
            }
        }
    }

    if (typeof children !== 'undefined') {
        if (helpers.isArray(children)) {
            for (let y = 0; y < children.length; y++) {
                if (children[y].nodeType) {
                    el.appendChild(children[y]);
                }
            }
        } else {
            el.appendChild(children);
        }
    }

    return el;
}

In practice:

let h1 = helpers.createElement('h1', {
    class: 'title',
    id:'title,
    innerText: 'This is a title' // This part will NOT set an attribute, but will set the value of the innerText property of this node.
});

The above renders:

<h1 class="title" id="title">This is a title</h1>

Now to my question...

I know that when creating elements in JavaScript, some properties are assigned as some kind of a value, whereas others are assigned as a property on the element.

A classic example of this is innerText and id, as used in our example. If I tried to do h1.setAttribute('innerText', 'foo'), the <h1> tag would render with a innerText attribute, which I don't want.

I have watched for this case in my code, and I handle it accordingly.

The only problem is that I don't know of all the scenarios in which this applies. The only ones I can think of and have in my code (in the helpers.shouldAssignVal() call above), is what's in that function here:

shouldAssignVal: key => {
    return key === 'value' || key === 'innerText' || key === 'innerHtml';
}

What are all of the keys on a JavaScript node that are assigned like node.key = 'foo', as opposed to node.setAttribute(key, 'foo')?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.