将字符串模板转为dom节点

近几天负责公司外链项目

技术方面使用的是原生的js 在生成dom元素时出现了这种问题

let cards=document.querySelector('.cards')
mine.forEach((ele, i) => {
        dom+= ` 

            

                
${ele.serviceName}
${ele.id}')">
查看




工单编号：${ele.workNo}
`
</div>`
})
cards.appendChild(dom)

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

报错信息: appendChild不能添加不是node节点的数据
这个处理方法

const parser = new DOMParser();
const htmlString = '
Hello World!
';
const doc = parser.parseFromString(htmlString, 'text/html');
//text/hml 表示生成html节点元素
const divNode = doc.body.firstChild;
console.log(divNode.textContent); // 输出 "Hello World!"

但是这种会生成一个完整的html元素节点

const parser = new DOMParser();
let cards=document.querySelector('.cards')
mine.forEach((ele, i) => {
        dom+= ` 

            

                
${ele.serviceName}
${ele.id}')">
查看




工单编号：${ele.workNo}
`
</div>`
})
let doc= parser.parseFromString(dom, 'text/html')
console.log(doc)
//cards.appendChild(dom)

打印信息实例

所以这种方式也行不通 废话不多说
最终解决方法

let dom=''
    mine.forEach((ele, i) => {
        let dom=document.createElement('div')
        dom.classList.add('cardChild')
        dom.innerHTML = `
        

            

                
${ele.serviceName}
${ele.id}')">
查看




工单编号：${ele.workNo}

`
cards.appendChild(dom)
})

通过createElement 设置innerHTML innerHTML会将字符串模板自动转换为node节点