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),

    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) {
        } else {

    return el;

In practice:

let h1 = helpers.createElement('h1', {
    class: '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')?


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.