Creating elements in DOM using DocumentFragment()

DocumentFragment.js

const USER_DATA_URL = 'https://jsonplaceholder.typicode.com/users';
const main          = document.getElementById('main');

async function init() {
  const fetchUsers = await fetch(USER_DATA_URL);
  const users      = await fetchUsers.json();
  
  users.forEach(user => {
    const fragment = userFragment(user);
    main.appendChild(fragment);
  });
}

function userFragment(user) {
  const fragment     = new DocumentFragment();
  const container    = createElement('div');
  const nameElement  = createElement('p', user.name);
  const phoneElement = createElement('p', user.phone);
  
  container.classList.add('container');
  container.appendChild(nameElement);
  container.appendChild(phoneElement);
  
  fragment.append(container);
  
  return fragment;
}

function createElement(elem, text) {
  const element = document.createElement(elem);
  
  if (text) {
    const textNode = document.createTextNode(text);
    element.appendChild(textNode);
  }
  
  return element;
}

init();