使用document.createElement实现雪花特效时报标签名无效错误如何解决

错误原因 #

document.createElement() 的入参仅支持传入纯HTML标签名（比如 span、div），你传入了包含属性、文本内容的完整HTML字符串，浏览器会将整段字符串识别为标签名称，自然会触发非法标签名的报错。

修复方案 #

提供两种常用实现方式：

方案1：标准DOM操作写法（更推荐，性能和可控性更高） #

先创建span元素，再单独赋值属性和内容：

var container = document.getElementById("js-container");

for (let i = 0; i <= snowMax; i++) {
    // 仅传入标签名创建元素
    const flake = document.createElement('span');
    // 单独设置各项属性
    flake.id = `flake${i}`;
    flake.style.cssText = `${snowStyles}position:absolute;top:-${snowMaxSize}`;
    flake.textContent = snowEntity;
    // 插入容器
    container.appendChild(flake);
}

方案2：innerHTML拼接写法 #

如果想要直接写完整HTML字符串，可以用容器的innerHTML属性拼接：

var container = document.getElementById("js-container");
let htmlStr = '';
for (let i = 0; i <= snowMax; i++) {
    htmlStr += `<span id='flake${i}' style='${snowStyles}position:absolute;top:-${snowMaxSize}'>${snowEntity}</span>`;
}
// 一次性插入所有内容
container.innerHTML = htmlStr;

内容的提问来源于stack exchange，提问作者R-b-n