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

window.onload = () => {
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);

  canvas.width = 16;
  canvas.height = 16;

  // Initialize GL

  var gl = initializeGL(canvas);
  initializeTexTarget(gl);

  registerShaderModules([fp64]);

  var idx0;
  var test_no = 0;
  const loop = 100;

let element = null;
  //   Check is string is JS
  if (src.match(/(.js)$/gi)) {
    element = document.createElement('script');

    if (src.match(/(.esm.js)$/gi)) {
      element.setAttribute('type', 'module')
    } else {
      element.setAttribute('nomodule', '')
    }

    element.src = src;
  }
  //   Check is string is CSS
  if (src.match(/(.css)$/gi)) {
    element = document.createElement('link');
    element.rel = 'stylesheet';
    element.href = src;
  }

  if (element) {
    element.setAttribute('id', id);
    document.head.appendChild(element);
  } else {
    console.warn(`Could not add asset '${id}': '${src}'`);
  }

  return document.getElementById(id);
};
/**

storiesOf('Welcome', module).add('Welcome', () => {
  const el = document.createElement('storybook-welcome-to-polymer');
  el.goToButton = linkTo('Button');
  return el;
});

import { action } from '@storybook/addon-actions';
import { document } from 'global';

import {
  array,
  boolean,
  button,
  color,
  date,
  select,
  withKnobs,
  text,
  number,
} from '@storybook/addon-knobs';

const cachedContainer = document.createElement('p');

export default {
  title: 'Addons/Knobs',
  decorators: [withKnobs],
};

export const Simple = () => {
  const name = text('Name', 'John Doe');
  const age = number('Age', 44);
  const content = `I am ${name} and I'm ${age} years old.`;
  return `<div>${content}</div>`;
};

export const DOM = () =&gt; {
  const name = text('Name', 'John Doe');
  const container = document.createElement('p');

onClick = (e: React.MouseEvent) => {
    const { children } = this.props;

    e.preventDefault();
    const tmp = document.createElement('TEXTAREA');
    const focus = document.activeElement;

    tmp.value = children;

    document.body.appendChild(tmp);
    tmp.select();
    document.execCommand('copy');
    document.body.removeChild(tmp);
    focus.focus();

    this.setState({ copied: true }, () => {
      window.setTimeout(() => this.setState({ copied: false }), 1500);
    });
  };

.add('Fill', () => {
    const div = document.createElement('div');

    const data = [0, 0.005, 0.01, 0.015, 0.02, 0.025];

    const slider = sliderBottom()
      .min(min(data))
      .max(max(data))
      .width(300)
      .displayValue(false)
      .tickFormat(format('.2%'))
      .ticks(5)
      .default(0.015)
      .fill('#2196f3');

    const g = select(div)
      .append('svg')
      .attr('width', 500)

export default function addHeadWarning(id, text) {
  if (!document.getElementById(id)) {
    const warning = document.createElement('h1');
    warning.textContent = text;
    warning.id = id;
    warning.style.backgroundColor = 'tomato';
    warning.style.padding = '10px';

    document.body.insertBefore(warning, document.body.firstChild);
  }
}

export const story5 = () => {
  const div = document.createElement('div');
  setTimeout(() => {
    div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
  }, 1000);
  return div;
};
story5.story = { name: 'Delayed render' };

onClick = e => {
    const { children } = this.props;

    e.preventDefault();
    const tmp = document.createElement('TEXTAREA');
    const focus = document.activeElement;

    tmp.value = children;

    document.body.appendChild(tmp);
    tmp.select();
    document.execCommand('copy');
    document.body.removeChild(tmp);
    focus.focus();

    this.setState({ copied: true }, () => {
      this.timeout = window.setTimeout(() => this.setState({ copied: false }), 1500);
    });
  };

function getRenderedTree(story: { render: () => any }) {
  const component = story.render();

  if (component instanceof Node) {
    return component;
  }

  const section: HTMLElement = document.createElement('section');
  section.innerHTML = component;

  if (section.childElementCount > 1) {
    return section;
  }

  return section.firstChild;
}