decoration-selector.js

const decSelector = document.querySelector('.decorations');
const tree = document.querySelector('.tree-container');
function placeDecoration(e) {
	if (decSelector.value !== "") {
		const decoration = document.createElement('div');
		decoration.textContent = decSelector.value;
		decoration.classList.add('decoration');
		// minus 15 to account for the decorations’ size of 30px
		decoration.setAttribute("style", `top: ${e.clientY}px; left: ${e.clientX - 15}px;`);
		tree.appendChild(decoration);
		decoration.setAttribute("x", `${e.clientY}`);
		decoration.setAttribute("y", `${e.clientX}`);
		tree.appendChild(decoration);
	}
}
tree.addEventListener('click', placeDecoration);