Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node 解决办法

最新推荐文章于 2025-07-11 16:02:57 发布

qq_35441993

最新推荐文章于 2025-07-11 16:02:57 发布

阅读量6.7w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js table

本文链接：https://blog.youkuaiyun.com/qq_35441993/article/details/77088619

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态向HTML表格的tbody元素中插入行数据的方法，并修复了使用innerHTML属性代替appendChild方法时出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想要实现动态向tbody中动态插入一行数据，写了如下代码：

html:
        <table id="theList">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </thead>
        <tbody id="myBody"></tbody>
    </table>


js:

let list = []
let temp = []

list.push({
    name: '张三',
    age: 20,
    sex: '男'
})
list.push({
    name: '赵四',
    age: 19,
    sex: '女'
})
function render(data) {
    var html=[]
    for (let i = 0; i < data.length; i++) {
        let template = '<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></td></tr>'
        html.push(template)
                                    document.getElementById('myBody').appendChild(html.join(''))
    } 
}
render(list)

运行以上代码时浏览器抛出了Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.的错误，通过查阅资料了解到出错原因：

appendChild()需要传入的是一个tr的对象，而不是tr的字符串
而上面html.join(”)是一个字符串

console.log(typeof html.join(''))  //stirng

解决办法：
render函数这样写：

function render(data) {
    for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr')
        tr.innerHTML = '<td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></td>'
        document.getElementById('myBody').appendChild(tr)
    } 
}

此时的tr是一个对象。不过这样显得有些多此一举，不如直接这样写：

function render(data) {
    var html=[]
    for (let i = 0; i < data.length; i++) {
        let template = '<tr><td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><a href="javascript:;">修改</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></td></tr>'
        html.push(template)
        document.getElementById('myBody').innerHTML = html.join('')
    } 
}