CODEWITHSUNDEEP
javascript
alexis wandor
alexis wandor

Reputation: 3

create element not appear in javascript

I'm just trying to create svg and add to children list's parent, but nothing's appear but if I put this code directly in HTML just the tag this is working can someone tell me why please

function    setAttributes(node, attributes){
    for (attribut in attributes){
        node.setAttribute(attribut, attributes[attribut]);
    }
}

function    createIconToParent(parentNode, error){
    let svgTag = document.createElement('svg');
    let pathTag = document.createElement ('path');

    setAttributes(svgTag, { "aria-hidden"   :   "true",
                            "focusable"     :   "false",
                            "data-prefix"   :   "fas",                           
                            "role"          :   "img",
                            "xmlns"         :   "http://www.w3.org/2000/svg",
                            "viewBox"       :   "0 0 512 512"
                        });

    if (error == true){
        setAttributes(svgTag, { "data-icon" :   "exclamation-circle",
                                "class"     :   "svg-inline--fa fa-exclamation-circle fa-w-16"
                            });
        setAttributes(pathTag, { "fill" :   "#08c708",
                                    "d" :   "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314\
                                            387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216\
                                            308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0\
                                            22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"});
    }
    else{
        setAttributes(svgTag, { "data-icon" :   "check-circle",
                                "class"     :   "svg-inline--fa fa-check-circle fa-w-16"
                            });
        setAttributes(pathTag, {"fill"  :   "crimson",
                                    "d" :   "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248\
                                            111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595\
                                            46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0\
                                            11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356\
                                            5.78-11.981 12.654z"});
    }

    svgTag.appendChild(pathTag);
    parentNode.appendChild(svgTag);
}
createIconToParent(document.body, true);

Upvotes: 0

Views: 63

Answers (1)

Emil Karlsson
Emil Karlsson

Reputation: 1078

SVG is non-standard to HTML. HTML can contain SVG, but SVG can not contain HTML. For that reason, javascript uses document.createElementNS instead of document.createElement for the creation of SVG elements within HTML code.

What you need to do in order to get your code to work is this:

function    createIconToParent(parentNode, error){
    let svgTag = document.createElementNS('w3.org/2000/svg','svg');
    let pathTag = document.createElementNS('w3.org/2000/svg','path');

    ...
}

Upvotes: 1

Related Questions