Uncaught TypeError: Node' の 'appendChild' 実行に失敗：パラメータ 1 は 'Node' 型でない 解決方法

tbodyに一行のデータをダイナミックに挿入する実装をしたいと思い、以下のコードを書きました。

html:
        
Name
Age
gender
operation



js:

let list = []
let temp = []

list.push({
    name: 'Zhang San',
    age: 20,
    sex: 'male'
})
list.push({
    name: 'Zhao Si',
    age: 19,
    sex: 'female'
})
function render(data) {
    var html=[]
    for (let i = 0; i < data.length; i++) {
        let template = ''+data[i].name+''+data[i].age+''+data[i].sex+'
Modify
Delete
'
        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

解決策
レンダー関数はこのように記述します。

function render(data) {
    for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr')
        tr.innerHTML = ''+data[i].name+''+data[i].age+''+data[i].sex+'
Modify
Delete
'
        document.getElementById('myBody').appendChild(tr)
    } 
}

この時点ではtrはオブジェクトです。でも、これはちょっと冗長な気がするので、こんな風に書いてみてはどうでしょう。

function render(data) {
    var html=[]
    for (let i = 0; i < data.length; i++) {
        let template = ''+data[i].name+''+data[i].age+''+data[i].sex+'
Modify
Delete
'
        html.push(template)
        document.getElementById('myBody').innerHTML = html.join('')
    } 
}

ランニングエフェクトの画像です。

その他の機能はまだ実装中です .........。