将字符串模板转为dom节点

最新推荐文章于 2023-07-19 11:17:27 发布

翻车请V我

最新推荐文章于 2023-07-19 11:17:27 发布

阅读量518

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_55666792/article/details/130401802

版权

文章讲述了在使用原生JavaScript进行外链项目开发时遇到的问题，即在生成DOM元素并尝试使用appendChild添加到页面时，由于参数不是Node类型导致错误。作者通过DOMParser解析字符串为HTML节点的方法尝试解决，但发现生成了完整HTML文档。最后，通过createElement和innerHTML结合的方式成功地创建并添加了DOM元素，避免了错误。

摘要由CSDN通过智能技术生成

近几天负责公司外链项目

技术方面使用的是原生的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)
    })