Create elements with attributes

by MegaScience

JavaScript

function createElement(tagName, options) {
	const element = document.createElement(tagName)
  for(const [prop, v] of Object.entries(options)) {
  	switch(prop.toLowerCase()) {
    	case 'classlist':
			case 'classname':
			case 'class':
      	for(const c of v.split(' ')) element.classList.add(c)
      	break
    	case 'textcontent':
			case 'innerhtml':
      case 'id':
      	element[prop] = v
      	break
			case 'attrs':
				for(const [attribute, value] of Object.entries(v)) element.setAttribute(attribute, value)
        break
      default:
      	console.log(`Attribute "${prop}" was not accounted for and could not be set to "${v}".`)
    }
  }
  return element
}
document.body.appendChild(createElement('div', {textContent: 'testing', id: 'no', class: 'test', attrs: {'data-state': true}}))
/*function create(ele, attrs) {
    //create the element with a specified string:
    var element = document.createElement(ele);

    //create a for...in loop set attributes:
    for (let val in attrs) {
    		console.log(val, attrs[val])
        //for support in the setAttrubute() method:
        if (element.setAttribute) {
        	console.log('setAttribute', val, attrs[val], element[val])
            if (element[val] in element) {
								console.log('setAttribute in')
               element.setAttribute(val, attrs[val]);
            } else {
								console.log('setAttribute equal')
                element[val] = attrs[val];
            }
        } else {
        		console.log('no setAttribute equal')
            element[val] = attrs[val];
        }
    }

    //return the element with the set attributes:
    return element;
}

document.body.appendChild(create('div', {'id': 'test', 'classList': 'smth'}));*/