How to use the dojo/dom-construct.create function in dojo

break;
                        default:
                            domConstruct.create("td", { innerHTML: safeEncode(cell[key]) }, tr);
                            break;
                    }
                }
                break;
            case "[object Array]":
                for (var i = 0; i < cell.length; ++i) {
                    switch (Object.prototype.toString.call(cell[i])) {
                        case "[object Boolean]":
                        case "[object Number]":
                        case "[object String]":
                            //  Item in Scalar  ---
                            var tr = domConstruct.create("tr", null, table);
                            domConstruct.create("td", { innerHTML: safeEncode(cell[i]) }, tr);
                            break;
                        default:
                            //  Child Dataset  ---
                            if (i === 0) {
                                var tr = domConstruct.create("tr", null, table);
                                for (var key in cell[i]) {
                                    domConstruct.create("th", { innerHTML: safeEncode(key) }, tr);
                                }
                            }
                            var tr = domConstruct.create("tr", null, table);
                            for (var key in cell[i]) {
                                if (cell[i][key]) {
                                    if (Object.prototype.toString.call(cell[i][key]) === '[object Object]' || Object.prototype.toString.call(cell[i][key]) === '[object Array]') {
                                        var td = domConstruct.create("td", null, tr);
                                        this.rowToTable(cell[i][key], cell[i], td);
                                    } else if (key.indexOf("__html", key.length - "__html".length) !== -1) {

var tr = domConstruct.create("tr", null, table);
                            domConstruct.create("td", { innerHTML: safeEncode(cell[i]) }, tr);
                            break;
                        default:
                            //  Child Dataset  ---
                            if (i === 0) {
                                var tr = domConstruct.create("tr", null, table);
                                for (var key in cell[i]) {
                                    domConstruct.create("th", { innerHTML: safeEncode(key) }, tr);
                                }
                            }
                            var tr = domConstruct.create("tr", null, table);
                            for (var key in cell[i]) {
                                if (cell[i][key]) {
                                    if (Object.prototype.toString.call(cell[i][key]) === '[object Object]' || Object.prototype.toString.call(cell[i][key]) === '[object Array]') {
                                        var td = domConstruct.create("td", null, tr);
                                        this.rowToTable(cell[i][key], cell[i], td);
                                    } else if (key.indexOf("__html", key.length - "__html".length) !== -1) {
                                        var td = domConstruct.create("td", { innerHTML: cell[i][key] }, tr);
                                    } else if (key.indexOf("__javascript", key.length - "__javascript".length) !== -1) {
                                        var td = domConstruct.create("td", null, tr);
                                        this.injectJavascript(cell[i][key], cell[i], td);
                                    } else {
                                        var val = cell[i][key];
                                        var td = domConstruct.create("td", { innerHTML: safeEncode(val) }, tr);
                                    }
                                } else {
                                    var td = domConstruct.create("td", { innerHTML: "" }, tr);
                                }
                            }
                    }
                }

}
                break;
            case "[object Array]":
                for (var i = 0; i < cell.length; ++i) {
                    switch (Object.prototype.toString.call(cell[i])) {
                        case "[object Boolean]":
                        case "[object Number]":
                        case "[object String]":
                            //  Item in Scalar  ---
                            var tr = domConstruct.create("tr", null, table);
                            domConstruct.create("td", { innerHTML: safeEncode(cell[i]) }, tr);
                            break;
                        default:
                            //  Child Dataset  ---
                            if (i === 0) {
                                var tr = domConstruct.create("tr", null, table);
                                for (var key in cell[i]) {
                                    domConstruct.create("th", { innerHTML: safeEncode(key) }, tr);
                                }
                            }
                            var tr = domConstruct.create("tr", null, table);
                            for (var key in cell[i]) {
                                if (cell[i][key]) {
                                    if (Object.prototype.toString.call(cell[i][key]) === '[object Object]' || Object.prototype.toString.call(cell[i][key]) === '[object Array]') {
                                        var td = domConstruct.create("td", null, tr);
                                        this.rowToTable(cell[i][key], cell[i], td);
                                    } else if (key.indexOf("__html", key.length - "__html".length) !== -1) {
                                        var td = domConstruct.create("td", { innerHTML: cell[i][key] }, tr);
                                    } else if (key.indexOf("__javascript", key.length - "__javascript".length) !== -1) {
                                        var td = domConstruct.create("td", null, tr);
                                        this.injectJavascript(cell[i][key], cell[i], td);
                                    } else {

constructor(state) {

    window.addEventListener("load", function() {

      function updateOnlineStatus() {
        state.online = navigator.onLine ? true : false;
      }

      window.addEventListener("online", updateOnlineStatus);
      window.addEventListener("offline", updateOnlineStatus);
    });

    this.messageContainer = domConstruct.create("div", {}, document.body);

    state.watch("online", (value) => {
      console.log(value);
      if (!value) {
        this.createOfflineMessage();
      }
      else {
        this.createOnlineMessage();
      }
    });
  }

_setMap (map, container) {
      this._map = map;

      let element = this._element = domConstruct.create('canvas', {
        id: 'canvas',
        width: map.width + 'px',
        height: map.height + 'px',
        style: 'position: absolute; left: 0px; top: 0px;'
      }, container);

      if (esriLang.isDefined(this.opacity)) {
        domStyle.set(element, 'opacity', this.opacity);
      }

      this._context = element.getContext('2d');
      if (!this._context) {
        console.error('This browser does not support <canvas> elements.');
      }

      this._mapWidth = map.width;</canvas>

if (i === 0) {
                                var tr = domConstruct.create("tr", null, table);
                                for (var key in cell[i]) {
                                    domConstruct.create("th", { innerHTML: safeEncode(key) }, tr);
                                }
                            }
                            var tr = domConstruct.create("tr", null, table);
                            for (var key in cell[i]) {
                                if (cell[i][key]) {
                                    if (Object.prototype.toString.call(cell[i][key]) === '[object Object]' || Object.prototype.toString.call(cell[i][key]) === '[object Array]') {
                                        var td = domConstruct.create("td", null, tr);
                                        this.rowToTable(cell[i][key], cell[i], td);
                                    } else if (key.indexOf("__html", key.length - "__html".length) !== -1) {
                                        var td = domConstruct.create("td", { innerHTML: cell[i][key] }, tr);
                                    } else if (key.indexOf("__javascript", key.length - "__javascript".length) !== -1) {
                                        var td = domConstruct.create("td", null, tr);
                                        this.injectJavascript(cell[i][key], cell[i], td);
                                    } else {
                                        var val = cell[i][key];
                                        var td = domConstruct.create("td", { innerHTML: safeEncode(val) }, tr);
                                    }
                                } else {
                                    var td = domConstruct.create("td", { innerHTML: "" }, tr);
                                }
                            }
                    }
                }
                break;
        }
    }

arcgisUtils.createMap(this._settings.webmap, mapDiv, this._settings.webmapOptions).then((response) => {
        this._response = response;
        this._map = response.map;
        this._map.webmapId = this._settings.webmap;

        if (response.errors) {
          this.handleMapResponseErrors(response.errors);
        }

        if (this._settings.homeButton) {
          this._homeButton = new HomeButton({
            map: this._map,
            extent: this._map.extent,
            theme: 'home-button'
          },domContruct.create('div',null,document.querySelector('.esriSimpleSlider .esriSimpleSliderIncrementButton'),"after"));
          $('.esriSimpleSlider .home-button .home').html(getIcon('home')).attr('title',viewerText.map.controls.homeButton);
          this._homeButton.on('load', () => {
            $('.esriSimpleSlider .home-button .home').html(getIcon('home')).attr('title',viewerText.map.controls.homeButton);
          });
        }

        if (this._map.loaded) {
          this._loadingMap = false;
          this.onMapLoad();
        } else {
          this._map.on('load', () => {
            this._loadingMap = false;
            this.onMapLoad();
          });
        }
      },(error) => {

max: extremes.max
        },
        connect: true,
        step: step,
        tooltips: [format, format]
      });

      //initialize state
      state.setFilter(filter, [extremes.min, extremes.max]);

      //add event listener on slider to change the state when slider values change
      rangeSliderContainer.noUiSlider.on("end", function(values) {
        state.setFilter(this.target.dataset.group, values);
      });

      domConstruct.create("span", {
        innerHTML: extremes.max + " " + unit
      }, this.filterPanel);
    }
  }

export function DynamicDialogForm(object) {
    var table = domConstruct.create("table", {});

    for (var key in object) {
        var tr = domConstruct.create("tr", {}, table);
        if (object.hasOwnProperty(key)) {
            var td = domConstruct.create("td", {
                style: "width: 30%;"
            }, tr);
            domConstruct.create("label", {
                innerHTML: object[key]['label']
            }, td);
            var td1 = domConstruct.create("td", {
                style: "width: 100%;"
            }, tr);
            this.key = object[key]['widget'].placeAt(td1);
        }
    }
    return table;
}

this.trails.forEach((trail) => {
      const trailElement = domConstruct.create("div", {
        "innerHTML": trail.name,
        "data-difficulty": trail.difficulty,
        "data-id": trail.id,
        "data-category": trail.category,
        "data-walktime": trail.walktime,
        "data-status": trail.status,
        "data-ascent": trail.ascent,
        "class": "trail"
      }, this.trailsPanel);

      on(trailElement, "click", (evt) => {
        state.setSelectedTrailId(parseInt(evt.target.dataset.id, 10));
      });
    });