create element not appear in javascript

Question

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);

You can't use document.createElement for SVG. You need to use document.createElementNS('w3.org/2000/svg','svg') and document.createElementNS('w3.org/2000/svg','path'). — Emil Karlsson
– Emil Karlsson, Commented Nov 12, 2021 at 8:58

Emil Karlsson · Accepted Answer · 2021-11-12 09:07:41Z

1

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');

    ...
}

answered Nov 12, 2021 at 9:07

Emil Karlsson

1,0881 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexis wandor Over a year ago

Thank you a for you explanations and your solution !

Collectives™ on Stack Overflow

create element not appear in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related