字符串SVG插入div时appendChild不生效的解决方法

appendChild() 方法仅支持传入DOM节点对象作为参数，直接传入HTML字符串时，浏览器会将其识别为普通文本节点，不会解析渲染为SVG元素。之前使用insertAdjacentHTML未生效，通常是参数写法错误，或者字符串内保留了HTML转义字符导致浏览器无法识别标签。

方案1：通过innerHTML赋值（最简便） #

直接给容器的innerHTML属性赋值HTML字符串，浏览器会自动解析内容为DOM元素：

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 items_group = document.createElement('div');
items_group.classList.add('items_group');
// 直接赋值innerHTML即可解析字符串
items_group.innerHTML = servicesIcons[0];

document.body.appendChild(items_group);

如果需要在容器已有内容后追加SVG，将赋值语句改为items_group.innerHTML += servicesIcons[0]即可。

方案2：正确调用insertAdjacentHTML #

该方法可以精确控制插入位置，不会覆盖容器原有内容，正确写法如下：

// 替换原代码中items_group.appendChild(servicesIcons[0])即可
// 第一个参数为插入位置，beforeend表示插入到容器内部的末尾
items_group.insertAdjacentHTML('beforeend', servicesIcons[0]);

insertAdjacentHTML的第一个位置参数仅支持4个合法值：beforebegin（元素自身外部前面）、afterbegin（元素内部开头）、beforeend（元素内部末尾）、afterend（元素自身外部后面），参数写错会导致方法不生效。

方案3：字符串转DOM节点后使用appendChild #

如果必须使用appendChild方法，需要先将HTML字符串解析为真实DOM节点再传入：

// 创建临时容器解析HTML字符串
const tempWrap = document.createElement('div');
tempWrap.innerHTML = servicesIcons[0];
// 提取解析完成的SVG节点
const svgElement = tempWrap.firstElementChild;
// 追加到目标容器
items_group.appendChild(svgElement);

额外注意：如果SVG字符串中保留了<、>这类HTML转义字符，需要先替换为真实的<、>，否则浏览器会将内容识别为普通文本，不会解析为标签元素。

内容的提问来源于stack exchange，提问作者Bekr