IE兼容代码迁移至Edge/Chrome时createElement触发DOMException报错求助

报错信息：Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('<input ...>') is not a valid name.

该报错核心是新旧浏览器API标准差异导致：旧版IE的document.createElement做了非标准扩展，支持传入完整HTML标签字符串创建元素，但符合W3C标准的现代浏览器（包括Edge、Chrome、Firefox等）仅允许document.createElement传入纯标签名（比如input、div），你传入完整的input标签HTML串会被识别为非法标签名。

方案1：标准DOM元素创建（推荐，安全性、可维护性更高） #

把原来拼接HTML串的逻辑改成先创建元素，再逐个赋值属性、绑定事件，代码示例如下：

editval='DetailView'+btnCount;
editvalue=strCustcode;
row.id= "Head"+ count;
var HeadID=row.id;

// 先创建input元素，仅传入纯标签名
var ctrl = document.createElement('input');
ctrl.type = 'button';
ctrl.value = strCustcode;
ctrl.name = editval;
ctrl.style.fontFamily = 'Arial';
ctrl.style.fontSize = '10pt';
ctrl.style.color = '#000080';
ctrl.tabIndex = 1;

if(strIpFlag == "Y"){
    ctrl.style.backgroundColor = '#ff9999';
    ctrl.style.border = '0 solid #ff9999';
    // 绑定对应事件
    ctrl.onfocus = function() {
        strDelCode = editvalue;
        gotFoucsOfView(HeadID, editval);
    };
    ctrl.onblur = function() {
        onLostFoucsOfView1(HeadID);
    };
    ctrl.onclick = function() {
        fnOPDetails1(customeId, editvalue, editval);
    };
}else{          
    ctrl.style.backgroundColor = '#E3DDCE';
    ctrl.style.border = '0 solid #E3DDCE';
    // 绑定对应事件
    ctrl.onfocus = function() {
        strDelCode = editvalue;
        gotFoucsOfView(HeadID, editval);
    };
    ctrl.onblur = function() {
        onLostFoucsOfView(HeadID);
    };
    ctrl.onclick = function() {
        fnOPDetails(customeId, editvalue, editval);
    };
}
// 直接追加元素即可
td1.appendChild(ctrl);

方案2：innerHTML快速适配（改动最小，适合临时快速兼容） #

如果不想大幅调整原有拼接HTML的逻辑，可以直接把拼接好的字符串插入到td元素中，原有HTML拼接逻辑完全不用改，仅修改最后一行即可：

// 原有拼接ctrl字符串的逻辑完全保留
editval='DetailView'+btnCount;
editvalue=strCustcode;
row.id= "Head"+ count;
var HeadID=row.id;

if(strIpFlag == "Y"){
ctrl="<input type='button' value='"+strCustcode+"' name='"+editval+"' style='font-family: Arial; font-size: 10pt; color: #000080; background-color: #ff9999; border: 0 solid #ff9999 ' tabindex='1'  onfocus=javascript:strDelCode='"+ editvalue +"';gotFoucsOfView("+HeadID+",'"+editval+"'); onblur= javascript:onLostFoucsOfView1("+HeadID+"); onclick=javascript:fnOPDetails1('"+ customeId +"','"+ editvalue +"','"+ editval+"'); >"
}else{          
ctrl="<input type='button' value='"+strCustcode+"' name='"+editval+"' style='font-family: Arial; font-size: 10pt; color: #000080; background-color: #E3DDCE; border: 0 solid #E3DDCE ' tabindex='1'  onfocus=javascript:strDelCode='"+ editvalue +"';gotFoucsOfView("+HeadID+",'"+editval+"'); onblur= javascript:onLostFoucsOfView("+HeadID+"); onclick=javascript:fnOPDetails('"+ customeId +"','"+ editvalue +"','"+ editval+"'); >"
}
// 替换原有appendChild+createElement逻辑即可
// 如果td1已有其他内容不想覆盖，用td1.insertAdjacentHTML('beforeend', ctrl)
td1.innerHTML = ctrl;

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