JSFiddle - React, Tailwind, and code Playground
HTML
<button id="button">Add</button>
<div id="box"></div>
CSS
button {
margin: 1rem;
}
#box {
margin: .5rem 1rem;
}
#box > * {
padding: .2rem 0;
}
JavaScript
var btn = document.getElementById('button');
var box = document.getElementById('box');
btn.addEventListener('click', function(event) {
event.preventDefault();
// create elements
let child_img = document.createElement('img');
let div1 = document.createElement('div');
let div1_text = document.createTextNode('$87.03');
let div2 = document.createElement('div');
let div2_text = document.createTextNode('Some text');
// append attributes
div1.classList.add('value');
div2.classList.add('subtext');
child_img.setAttribute('src', 'http://lorempixel.com/400/200/sports/');
// append img to box
box.appendChild(child_img);
// append text node to div1 and div1 to box
div1.appendChild(div1_text);
box.appendChild(div1);
// append text node to div2 and div2 to box
div2.appendChild(div2_text);
box.appendChild(div2);
}, {
passive: false
});