Inserting svg into div as string-CodePudding

I have a code below

    let servicesIcons = 
    [
    `<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 29 29' fill='lightgray'>
        <g clip-path='url(#clip0_286_1053)'>
        <path d='M14.5 28.5C6.76801 28.5 0.500001 22.232 0.500001 14.5C0.500002 6.76801 6.76801 0.499999 14.5 0.499999C22.232 0.5 28.5 6.76801 28.5 14.5C28.5 22.232 22.232 28.5 14.5 28.5Z' stroke='white'/>
        <path d='M14.5 17C15.8807 17 17 15.8807 17 14.5C17 13.1193 15.8807 12 14.5 12C13.1193 12 12 13.1193 12 14.5C12 15.8807 13.1193 17 14.5 17Z' fill='white'/>
        <path d='M22.9662 14.2991C22.2997 12.5013 21.1426 10.9466 19.638 9.82714C18.1333 8.70765 16.3471 8.07243 14.5 8C12.6529 8.07243 10.8667 8.70765 9.362 9.82714C7.85735 10.9466 6.70027 12.5013 6.03376 14.2991C5.98875 14.4289 5.98875 14.5711 6.03376 14.7009C6.70027 16.4987 7.85735 18.0534 9.362 19.1729C10.8667 20.2924 12.6529 20.9276 14.5 21C16.3471 20.9276 18.1333 20.2924 19.638 19.1729C21.1426 18.0534 22.2997 16.4987 22.9662 14.7009C23.0113 14.5711 23.0113 14.4289 22.9662 14.2991ZM14.5 18.3409C13.7715 18.3409 13.0593 18.1156 12.4536 17.6936C11.8479 17.2716 11.3757 16.6717 11.0969 15.9699C10.8182 15.268 10.7452 14.4957 10.8873 13.7507C11.0295 13.0056 11.3803 12.3212 11.8954 11.7841C12.4106 11.2469 13.0669 10.8811 13.7814 10.7329C14.4959 10.5847 15.2365 10.6608 15.9096 10.9515C16.5827 11.2422 17.1579 11.7345 17.5627 12.3661C17.9674 12.9977 18.1834 13.7403 18.1834 14.5C18.1819 15.5182 17.7934 16.4942 17.1029 17.2142C16.4125 17.9342 15.4764 18.3393 14.5 18.3409Z' fill='white'/>
        </g>
        <defs>
        <clipPath id='clip0_286_1053'>
        <rect width='29' height='29' fill='white'/>
        </clipPath>
        </defs>
    </svg>`
    ];

    const element = document.createElement('div');
    element.classList.add('element_1');

    const items_group = document.createElement('div');
    items_group.classList.add('items_group');

    items_group.appendChild(servicesIcons[0]);

    const body = document.body;
    body.appendChild(items_group);

I have created servicesIcons and assigned string. What I am trying to do is append this string as html to div (items_group.appendChild(servicesIcons[0])), but it's not really working. I tried using insertAdjacentHTML but it's not doing anything.

CodePudding user response：

Why are you making life so hard for yourself? It can easily be done like this:

const icons = 
[
`<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 29 29' fill='lightgray'>
    <g clip-path='url(#clip0_286_1053)'>
    <path d='M14.5 28.5C6.76801 28.5 0.500001 22.232 0.500001 14.5C0.500002 6.76801 6.76801 0.499999 14.5 0.499999C22.232 0.5 28.5 6.76801 28.5 14.5C28.5 22.232 22.232 28.5 14.5 28.5Z' stroke='white'/>
    <path d='M14.5 17C15.8807 17 17 15.8807 17 14.5C17 13.1193 15.8807 12 14.5 12C13.1193 12 12 13.1193 12 14.5C12 15.8807 13.1193 17 14.5 17Z' fill='white'/>
    <path d='M22.9662 14.2991C22.2997 12.5013 21.1426 10.9466 19.638 9.82714C18.1333 8.70765 16.3471 8.07243 14.5 8C12.6529 8.07243 10.8667 8.70765 9.362 9.82714C7.85735 10.9466 6.70027 12.5013 6.03376 14.2991C5.98875 14.4289 5.98875 14.5711 6.03376 14.7009C6.70027 16.4987 7.85735 18.0534 9.362 19.1729C10.8667 20.2924 12.6529 20.9276 14.5 21C16.3471 20.9276 18.1333 20.2924 19.638 19.1729C21.1426 18.0534 22.2997 16.4987 22.9662 14.7009C23.0113 14.5711 23.0113 14.4289 22.9662 14.2991ZM14.5 18.3409C13.7715 18.3409 13.0593 18.1156 12.4536 17.6936C11.8479 17.2716 11.3757 16.6717 11.0969 15.9699C10.8182 15.268 10.7452 14.4957 10.8873 13.7507C11.0295 13.0056 11.3803 12.3212 11.8954 11.7841C12.4106 11.2469 13.0669 10.8811 13.7814 10.7329C14.4959 10.5847 15.2365 10.6608 15.9096 10.9515C16.5827 11.2422 17.1579 11.7345 17.5627 12.3661C17.9674 12.9977 18.1834 13.7403 18.1834 14.5C18.1819 15.5182 17.7934 16.4942 17.1029 17.2142C16.4125 17.9342 15.4764 18.3393 14.5 18.3409Z' fill='white'/>
    </g>
    <defs>
    <clipPath id='clip0_286_1053'>
    <rect width='29' height='29' fill='white'/>
    </clipPath>
    </defs>
</svg>`
];

document.querySelector(".container"). insertAdjacentHTML("afterbegin",icons[0]);

<div ></div>

CodePudding user response：

I think the problem comes from the fact that you put a raw string when you appendChild.

To avoid .innerHTML for security mesure I think you should have a /icons folder and import then as you should do in a normal html page with src or something like that.

This way I think the page will understand it is a html tag and not a raw string.