Emulating the React.js createElement function

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')?


Category: javascript Time: 2016-07-28 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.222 (s). 12 q(s)