My JSON data contains various items that need to be placed in specific positions within a form. Is it possible to achieve this?
var objs = [{
"Object1": {
"ID": 1,
"type": "input",
"color": "red",
"Text": "DARKDRAGON",
"width": "100px",
"height": "100px",
"top": "50%",
"left": "25%",
"Font": {
"fontName": "tahoma",
"font": "150px"
}
},
"Object2": {
"ID": 2,
"type": "textarea",
"color": "cyan",
"Text": "SPEEDYTIGER",
"width": "100px",
"height": "100px",
"top": "50%",
"left": "25%",
"Font": {
"fontName": "tahoma",
"font": "150px"
}
},
"Object3": {
"ID": 3,
"type": "input",
"color": "blue",
"Text": "AMyesteriousAdults",
"width": "100px",
"height": "100px",
"top": "50%",
"left": "25%",
"Font": {
"fontName": "tahoma",
"font": "150px"
}
},
"Object4": {
"ID": 4,
"type": "button",
"color": "darkorange",
"Text": "AMyesteriousDarkSpeed",
"width": "100px",
"height": "100px",
"top": "50%",
"left": "25%",
"Font": {
"fontName": "tahoma",
"font": "150px"
}
}
}]
objs.forEach(function(objs) {
for (var k in objs) {
if (objs[k] instanceof Object) {
console.log(objs[k].type);
var elmn = document.createElement(objs[k].type);
elmn.textContent = objs[k].Text;
elmn.style.color = objs[k].color;
elmn.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = objs[k].top;
document.getElementById('ColorArea').appendChild(elmn);
} else {
console.log('Else');
};
}
});<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ColorArea">
</div>
<script src="Main.js"></script>
</body>
</html>I would like the items to be arranged one on the left, one at the bottom, or all placed under each other to ensure a well-organized appearance.