/**
 * Primeiro, criamos uma função chamada "addElement".
 * Esta função, recebe um parâmetro chamado "params".
 * "params" é um objeto que pode conter 3 propriedades:
 *
 * - after: Após qual elemento deve ser inserido;
 * - content: Qual o conteúdo deve ser inserido;
 * - className: Qual a classe a ser utilizada no elemento inserido.
*/
function addElement(params) {
    // Aqui, criamos um elemento <div> que ainda não está dentro do nosso HTML final
    // Ele está na memória, apenas
    var div = document.createElement('div');

    // Atribuímos a esta <div> imaginária as classes solicitadas em "className"
    div.className = params.className;

    // Inserimos o conteúdo da <div> com o nosso parâmetro "content"
    div.innerHTML = params.content;

    // Por último, pesquisamos o elemento passado em "after", e inserimos no final do mesmo a nossa <div> imaginária
    document.querySelector(params.after).appendChild(div);
}

/**
 * Abaixo, podemos ver alguns casos de uso.
 */

// 1 Caso) Sub-título ao lado da logo
addElement({
  after: '#logo',
  content: '<p>Empresas eficientes e lucrativas</p>',
  className: 'sub-header'
});

// 2 Caso) Título acima da imagem destacada
addElement({
  after: '.featured-media .featured-wrapper',
  content: '<h2>Você sabia que 50% das empresas quebram por falta de gestão?</h2>',
  className: 'main-phrase'
});