追加元素 insertAdjacentHTML

var tbody = document.querySelector('tbody')

      data.forEach(item => {

        // // 写法一：insertAdjacentHTML() 直接创建元素并添加元素

        // var str = '<tr><td>' + item.id + '</td>' + '<td>' + item.pname + '</td>' + '<td>' + item.price + '</td></tr>'

        // tbody.insertAdjacentHTML('beforeend', str)

        // 写法二：先创建元素 createElement()，再添加元素appendChild()

        var tr = document.createElement('tr')

        tr.innerHTML = '<td>' + item.id + '</td>' + '<td>' + item.pname + '</td>' + '<td>' + item.price + '</td>'

        tbody.appendChild(tr)

      })

var tbody = document.querySelector('tbody')
      data.forEach(item => {
        // // 写法一：insertAdjacentHTML() 直接创建元素并添加元素
        // var str = '<tr><td>' + item.id + '</td>' + '<td>' + item.pname + '</td>' + '<td>' + item.price + '</td></tr>'
        
        // tbody.insertAdjacentHTML('beforeend', str)

        // 写法二：先创建元素createElement()，再添加元素appendChild()
        var tr = document.createElement('tr')

        tr.innerHTML = '<td>' + item.id + '</td>' + '<td>' + item.pname + '</td>' + '<td>' + item.price + '</td>'
        tbody.appendChild(tr)
      })