How can I generate an element and from just an array of object data?
Instead of this:
var element1 = document.createElement('div');
element1.style.width = '100px';
element1.style.height = '100px';
I want (something like) this:
element = [none, element1, element2, element3, etc];
element[1] = {name:'element1', type:'div', width:'100px', height:'100px'};
var (element[1].name) = document.createElement(element[1].type);
(element[1].name).style.width = element[1].width;
(element[1].name).style.height= element[1].height;
There's no native method for doing this (AFAIK), but you can try an improvised one, like
function ArrayToElements(array) {
let elemList = {};
for (let i of array) {
let elem = document.createElement(i.type);
for (let j in i.attr) {
elem.setAttribute(j, i.attr[j]);
}
elemList[i.name] = elem;
}
return elemList;
}
This method supports all attributes, including style.
I've created a working example here.
Try this:
const elementList = [
{ name: 'element1', type: 'div', width: '100px', height: '100px' },
{ name: 'element2', type: 'div', width: '100px', height: '100px' },
{ name: 'element1', type: 'div', width: '100px', height: '100px' }
]
const nodeList = elementList.map(el =>
document
.createRange()
.createContextualFragment(
`<${el.type} style="width: ${el.width}; height: ${el.height}">${el.name}</${el.type}>`
)
);
You can read what document.createRange().createContextualFragment() does here, but essentially you end up with an array of nodes which you can then append to another DOM element, or the body itself.
nodeList.forEach(el => document.body.append(el));