How to use the global/document.createElement function in global

color() {
    const { selectedFeatureIndexes } = this.state;
    if (selectedFeatureIndexes && selectedFeatureIndexes.length) {
      const inputElement = document.createElement('input');
      inputElement.type = 'color';
      inputElement.addEventListener('change', () => {
        const color = inputElement.value;
        if (color.length === 7 && color.substring(0, 1) === '#') {
          // convert from #123456 to array of numbers
          const num = parseInt(color.substring(1), 16);
          const fillColor = [16, 8, 0].map(sh => (num >> sh) & 0xff);

          const features = [...this.state.data.features];
          if (!features[selectedFeatureIndexes[0]].properties) {
            features[selectedFeatureIndexes[0]].properties = {};
          }
          features[selectedFeatureIndexes[0]].properties.fillColor = fillColor;
          const data = { ...this.state.data, features };
          this.setState({ data });
        }

const createThumbnail = function(thumbnail) {
  if (!thumbnail) {
    const placeholder = document.createElement('div');

    placeholder.className = 'vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder';
    return placeholder;
  }

  const picture = document.createElement('picture');

  picture.className = 'vjs-playlist-thumbnail';

  if (typeof thumbnail === 'string') {
    // simple thumbnails
    const img = document.createElement('img');

    img.src = thumbnail;
    img.alt = '';
    picture.appendChild(img);
  } else {
    // responsive thumbnails

    // additional variations of a <picture> are specified as
    // <source> elements
    for (let i = 0; i &lt; thumbnail.length - 1; i++) {</picture>

export function createEl(tagName = 'div', properties = {}, attributes = {}, content) {
  const el = document.createElement(tagName);

  Object.getOwnPropertyNames(properties).forEach(function(propName) {
    const val = properties[propName];

    // See #2176
    // We originally were accepting both properties and attributes in the
    // same object, but that doesn't work so well.
    if (propName.indexOf('aria-') !== -1 || propName === 'role' || propName === 'type') {
      log.warn('Setting attributes in the second argument of createEl()\n' +
               'has been deprecated. Use the third argument instead.\n' +
               `createEl(type, properties, attributes). Attempting to set ${propName} to ${val}.`);
      el.setAttribute(propName, val);

    // Handle textContent since it's not supported everywhere and we have a
    // method for it.
    } else if (propName === 'textContent') {

// create new items
    for (let i = 0; i < playlist.length; i++) {
      const item = new PlaylistMenuItem(this.player_, {
        item: playlist[i]
      }, this.options_);

      this.items.push(item);
      list.appendChild(item.el_);
    }

    // Inject the ad overlay. IE<11 doesn't support "pointer-events:
    // none" so we use this element to block clicks during ad
    // playback.
    if (!overlay) {
      overlay = document.createElement('li');
      overlay.className = 'vjs-playlist-ad-overlay';
      list.appendChild(overlay);
    } else {
      // Move overlay to end of list
      list.appendChild(overlay);
    }

    // select the current playlist item
    const selectedIndex = this.player_.playlist.currentItem();

    if (this.items.length && selectedIndex >= 0) {
      addSelectedClass(this.items[selectedIndex]);

      const thumbnail = this.items[selectedIndex].$('.vjs-playlist-thumbnail');

      if (thumbnail) {

const event = createEvent(eventName, flash);
			if (message) {
				try {
					event.data = JSON.parse(message);
					event.details.data = JSON.parse(message);
				} catch (e) {
					event.message = message;
				}
			}

			// send event from Flash up to the mediaElement
			flash.mediaElement.dispatchEvent(event);
		};

		// insert Flash object
		flash.flashWrapper = document.createElement('div');

		// If the access script flag does not have any of the valid values, set to `sameDomain` by default
		if (['always', 'sameDomain'].indexOf(flash.options.shimScriptAccess) === -1) {
			flash.options.shimScriptAccess = 'sameDomain';
		}

		const
			autoplay = mediaElement.originalNode.autoplay,
			flashVars = [
				`uid=${flash.id}`,
				`autoplay=${autoplay}`,
				`allowScriptAccess=${flash.options.shimScriptAccess}`,
				`preload=${mediaElement.originalNode.getAttribute('preload') || ''}`
			],
			isVideo = mediaElement.originalNode !== null && mediaElement.originalNode.tagName.toLowerCase() === 'video',
			flashHeight = (isVideo) ? mediaElement.originalNode.height : 1,

specialElHandler(fromEl, toEl);
        }
    } // END: morphEl(...)

    var morphedNode = fromNode;
    var morphedNodeType = morphedNode.nodeType;
    var toNodeType = toNode.nodeType;

    if (!childrenOnly) {
        // Handle the case where we are given two DOM nodes that are not
        // compatible (e.g. <div> --&gt; <span> or <div> --&gt; TEXT)
        if (morphedNodeType === 1) {
            if (toNodeType === 1) {
                if (fromNode.tagName !== toNode.tagName) {
                    onNodeDiscarded(fromNode);
                    morphedNode = moveChildren(fromNode, document.createElement(toNode.tagName));
                }
            } else {
                // Going from an element node to a text node
                morphedNode = toNode;
            }
        } else if (morphedNodeType === 3) { // Text node
            if (toNodeType === 3) {
                morphedNode.nodeValue = toNode.nodeValue;
                return morphedNode;
            } else {
                // Text node to something else
                morphedNode = toNode;
            }
        }
    }
</div></span></div>

triggerError_(errorObj) {
    // if we have videojs-errors use it
    if (this.videojsErrorsSupport_) {
      this.player_.error(errorObj);
    // if we don't have videojs-errors just use a normal player error
    } else {
      // strip any html content from the error message
      // as it is not supported outside of videojs-errors
      const div = document.createElement('div');

      div.innerHTML = errors[errorObj.code].message;

      const message = div.textContent || div.innerText || '';

      this.player_.error({
        code: errorObj.code,
        message
      });
    }
  }

test('should read class names on an element', function(){
  var el = document.createElement('div');
  Lib.addClass(el, 'test-class1');
  ok(Lib.hasClass(el, 'test-class1') === true, 'class detected');
  ok(Lib.hasClass(el, 'test-class') === false, 'substring correctly not detected');

});

test('[finder] clickEvent', function test(t) {
  var cfg = {
    className: {
      item: 'fjs-item',
      col: 'fjs-col',
      active: 'fjs-active'
    }
  };
  var emitter = new EventEmitter();
  var item = document.createElement('li');
  var col = document.createElement('div');
  var event;

  col.className = cfg.className.col;
  item.className = cfg.className.item;
  col.appendChild(item);
  event = {
    target: item
  };

  t.plan(2);
  finder.clickEvent(cfg, emitter, {target: col});

  emitter.on('itemClicked', t.ok.bind(null, true, 'item clicked'));
  finder.clickEvent(cfg, emitter, event);

  item.className = cfg.className.item + ' ' + cfg.className.active;

function testHelperMakeTag() {
  const videoTag = document.createElement('video');

  videoTag.id = 'example_1';
  videoTag.className = 'video-js';
  return videoTag;
}