JSFiddle - React, Tailwind, and code Playground
HTML
</script>
</head>
<div>
<input type="button" onclick="creatediv(id, 'User 1', 'width', 'height', 'left', 'bottom')" value="Create Div"/>
</div>
</html>
CSS
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100%;
}
#container div {
position: absolute;
width: 50px;
height: 50px;
}
#d1 {
background: blue;
}
#d2 {
background: green;
}
JavaScript
function creatediv(id, html, width, height, left, bottom) {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', id);
if (width) {
newdiv.style.width = 200;
}
if (height) {
newdiv.style.height = 50;
}
if ((left || bottom) || (left && bottom)) {
newdiv.style.position = "fixed";
if (left) {
newdiv.style.left = left;
if (bottom) {
newdiv.style.bottom = bottom = "10";
}
}
newdiv.style.background = "#FFFFF";
newdiv.style.border = "4px solid #000";
if (html) { newdiv.innerHTML = html;
}
else {
newdiv.innerHTML = "nothing";
}
document.body.appendChild(newdiv);
}
}