<button onclick="addElement()">Add new element + create clone</button>
<section></section>
button { 
  padding: 10px; 
  font-family: monospace;
  font-size: 2rem;
}

section { 
  display:flex; 
  flex-direction: column; 
  justify-content: space-around;
  height: 80vh;
}

.msg {
  width: 95%;
  padding: 15px;
  margin: auto;
  border: thin solid #feba02;
  background-color: #ffcc2f;
  font-size: 0.9rem;
}

.clone {
  width: 95%;
  padding: 10px;
  margin: auto;
  border: thin solid #ec1c24;
  background-color: #ee4f4f;
  font-size: 1.6rem;
}
/* Функция добавления узла в DOM */
function addElement() {
  var newMessage = document.createElement("div");//создали элемент, но практически пустой
  newMessage.className = "msg";//указли ему класс CSS свойств
  newMessage.innerHTML = "Hello, world!!";//занесли текс
  
  /* добавим элемент в начало */
  var parent = document.getElementsByTagName("section")[0];//так как он один такой
  parent.insertBefore(newMessage, parent.firstChild);//insertBefore - считается универсальным методом
  
  /* Теперь создадим клона */
  var cloneNewMessage = newMessage.cloneNode(true);
  cloneNewMessage.className = "clone";//у клона будет другой CSS класс
  parent.insertBefore(cloneNewMessage, parent.firstChild);//точно так же как и другие узлы добавляем в DOM
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.