How to remove the eval (javascript)

Question

Since eval is not good with the performance, I would like to know if there is any way to remove the eval in this code for some other code. The objective is to be able to create SVG elements via a function. The current method is by using an eval to create the element.

function createrect(createrectvar1 , createrectvar2 , createrectvar3 , createrectvar4 , createrectvar5 , createrectvar6 , createrectvar7 , createrectvar8 , createrectvar9 , createrectvar10 , createrectvar11) {
/** id , x , y , rx , width , height , fill , stroke ,  stroke w , svgid , onclick **/
if (createrectvar11 == "_") {
eval(createrectvar1 + " = document.createElementNS('http://www.w3.org/2000/svg', 'rect') ; " + createrectvar1 + ".setAttribute('x' , " + createrectvar2 + ") ; " + createrectvar1 + ".setAttribute('y' , " + createrectvar3 + ") ; " + createrectvar1 + ".setAttribute('rx' , " + createrectvar4 + ") ; " + createrectvar1 + ".setAttribute('width' , " + createrectvar5 + ") ; " + createrectvar1 + ".setAttribute('height' , " + createrectvar6 + ") ; " + createrectvar1 + ".setAttribute('fill' , '" + createrectvar7 + "') ; " + createrectvar1 + ".setAttribute('stroke' , '" + createrectvar8 + "') ; " + createrectvar1 + ".setAttribute('stroke-width' , '" + createrectvar9 + "') ; " + createrectvar10 + ".appendChild(" + createrectvar1 + ") ; ") ;
} else {
eval(createrectvar1 + " = document.createElementNS('http://www.w3.org/2000/svg', 'rect') ; " + createrectvar1 + ".setAttribute('x' , " + createrectvar2 + ") ; " + createrectvar1 + ".setAttribute('y' , " + createrectvar3 + ") ; " + createrectvar1 + ".setAttribute('rx' , " + createrectvar4 + ") ; " + createrectvar1 + ".setAttribute('width' , " + createrectvar5 + ") ; " + createrectvar1 + ".setAttribute('height' , " + createrectvar6 + ") ; " + createrectvar1 + ".setAttribute('fill' , '" + createrectvar7 + "') ; " + createrectvar1 + ".setAttribute('stroke' , '" + createrectvar8 + "') ; " + createrectvar1 + ".setAttribute('stroke-width' , '" + createrectvar9 + "') ; " + createrectvar1 + ".setAttribute('onclick' , '" + createrectvar11 + "()') ; " + createrectvar10 + ".appendChild(" + createrectvar1 + ") ; ") ;
}
}

Answer 1

I don't see the point in using eval() . Here I have a function createRect() that will create a rect element in a svg element.

 const createRect = (svgElm, id, height = 1, width = 1, fill = 'blue') => { let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); rect.setAttribute('height', height); rect.setAttribute('width', width); rect.setAttribute('fill', fill); rect.setAttribute('x', 0); rect.setAttribute('y', 0); svgElm.appendChild(rect); }; let svg01 = document.getElementById('svg01'); createRect(svg01, 12, 100, 50);

 <svg xmlns="http://www.w3.org/2000/svg" id="svg01"></svg>

Answer 2

I really don't like the approach , but I'm sure you're looking for something like this:

function createrect(createrectvar1, createrectvar2, createrectvar3, createrectvar4, createrectvar5, createrectvar6, createrectvar7, createrectvar8, createrectvar9, createrectvar10, createrectvar11) {
    /** id, x, y, rx, width, height, fill, stroke,  stroke w, svgid, onclick **/
    let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('id',createrectvar1); rect.setAttribute('x',createrectvar2); rect.setAttribute('y',createrectvar3) ; rect.setAttribute('rx',createrectvar4) ; rect.setAttribute('width',createrectvar5) ; rect.setAttribute('height',createrectvar6) ; rect.setAttribute('fill',createrectvar7) ; rect.setAttribute('stroke',createrectvar8) ; rect.setAttribute('stroke-width',createrectvar9);
    if (createrectvar11 != '_') rect.setAttribute('onclick',createrectvar11);
    document.getElementById(createrectvar10).appendChild(rect);
}