将字符串模板转为dom节点

近几天负责公司外链项目

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

let cards=document.querySelector('.cards')
mine.forEach((ele, i) => {
        dom+= ` <div class="">
            <div class="cardChildHeader">
                <div class="cardChildHeaderLeft">${ele.serviceName}</div>
                <div class="cardChildHeaderRight" οnclick="detail('${ele.id}')">
                    查看
                </div>
            </div>
            <hr>
            <div class="cardChildContent">
                <div>工单编号：${ele.workNo}</div>
            </div>`
        </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 = '<div>Hello World!</div>';
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+= ` <div class="">
            <div class="cardChildHeader">
                <div class="cardChildHeaderLeft">${ele.serviceName}</div>
                <div class="cardChildHeaderRight" οnclick="detail('${ele.id}')">
                    查看
                </div>
            </div>
            <hr>
            <div class="cardChildContent">
                <div>工单编号：${ele.workNo}</div>
            </div>`
        </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 = `
        <div class="">
            <div class="cardChildHeader">
                <div class="cardChildHeaderLeft">${ele.serviceName}</div>
                <div class="cardChildHeaderRight" οnclick="detail('${ele.id}')">
                    查看
                </div>
            </div>
            <hr>
            <div class="cardChildContent">
                <div>工单编号：${ele.workNo}</div>
            </div>
        </div>`
         cards.appendChild(dom)
    })
   

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