Find out how to create DOM nodes more easily

[programarivm]

At the moment, DOM nodes are being created programmatically using the mount() method defined in AbstractController, as it shown in the ExplainPositionModal component.

import Modal from 'bootstrap/js/dist/modal.js';
import AbstractComponent from '../AbstractComponent.js';

export class ExplainPositionModal extends AbstractComponent {
  mount() {
    const p = this.el.querySelector('p');
    p.replaceChildren();
    p.appendChild(document.createTextNode(this.props.explanation));
  }
}

export const explainPositionModal = new ExplainPositionModal(
  document.getElementById('explainPositionModal'),
  {
    modal: new Modal(document.getElementById('explainPositionModal')),
    explanation: ''
  }
);

However, creating DOM nodes might be simplified if JSX syntax or something similar could be used instead.

Happy learning!