Dynamically Adding Elements edit

  
    content_copy
  
  
window.addEventListener('DOMContentLoaded', () => {
  function addFilledInput() {
    const filledInputDiv = document.createElement('div');
    filledInputDiv.className = 'form-filled';
    const filledInput = document.createElement('input');
    filledInput.className = 'form-control';
    filledInput.id = 'firstNameFilled';
    filledInput.type = 'text';

    const filledInputLabel = document.createElement('label');
    filledInputLabel.textContent = 'First Name';
    filledInputLabel.className = 'form-label';
    filledInputLabel.setAttribute('for', 'firstNameFilled');

    const filledInputHelper = document.createElement('span');
    filledInputHelper.textContent = 'Example helper text';
    filledInputHelper.className = 'form-helper';

    filledInputDiv.append(filledInput, filledInputLabel, filledInputHelper);

    document.getElementById('insert-filled-input').append(filledInputDiv);
  }

  addFilledInput();
});
  

  
    content_copy
  
  
window.addEventListener('DOMContentLoaded', () => {
  async function getUsers() {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/users',
      );

      const data = await response.json();
      return data;
    } catch (error) {
      console.error(error);
    }
  }

  function addSelects() {
    const newSelect = document.createElement('select');
    newSelect.classList.add('select');
    newSelect.id = 'newSelect';
    const newSelectLabel = document.createElement('label');
    newSelectLabel.textContent = 'Select';
    newSelectLabel.classList.add('form-label', 'select-label');
    newSelectLabel.setAttribute('for', 'newSelect');

    document
      .getElementById('insert-select')
      .append(newSelect, newSelectLabel);

    getUsers()
      .then((users) => {
        users.forEach((element) => {
          const option = document.createElement('option');
          option.value = element.username;
          option.textContent = element.name;
          document.getElementById('newSelect').append(option);
        });
      })
      .catch((err) => console.error(err));

    const newFilledSelect = `
        <select class="select-filled" id="inserted-filled">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label class="form-label select-label" for="inserted-filled">Inserted select</label>
      `;

    document.getElementById('insert-filled-select').innerHTML =
      newFilledSelect;
  }

  addSelects();
});
  

  
    content_copy
  
  
window.addEventListener('DOMContentLoaded', () => {
  const newDrawerTemplateString = `
    <button
      type="button"
      class="btn btn-primary"
      data-mdb-toggle="drawer"
      data-mdb-target="#slide-out"
    >
      Open Drawer
    </button>

    <aside id="slide-out" class="drawer">
      <div class="drawer-container">
        <header class="drawer-header">
          <h2 class="drawer-header-title h4">Drawer</h2>
          <div class="drawer-header-content">
            <button
              aria-label="Close drawer"
              class="btn btn-floating btn-flat"
              data-mdb-target="#slide-out"
              data-mdb-toggle="drawer"
              type="button"
            >
              <span class="material-icons">close</i>
            </button>
          </div>
        </header>
        <div class="drawer-content">
          <div key="content">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
              vel varius erat, et iaculis magna. Donec maximus mauris ut ipsum
              lobortis sagittis. Nunc fringilla est ac sapien commodo porttitor. Sed
              leo ipsum, fringilla sit amet ultricies a, mattis nec ex. In metus
              ante, ultrices sit amet tempus non, rhoncus non dui. Vestibulum
              sollicitudin nec tortor ut accumsan. Suspendisse a bibendum nunc.
              Praesent ultrices lorem posuere sollicitudin posuere.
            </p>
          </div>
        </div>
      </div>
    </aside>
  `;

  document.getElementById('addDrawer').innerHTML = newDrawerTemplateString;
});