javascript试图通过createelement在表格中添加html答案

【问题标题】：javascript trying to add html inside a table via createelementjavascript试图通过createelement在表格中添加html
【发布时间】：2019-01-14 01:18:15
【问题描述】：

我的 html 文件中有一个 json 代码传入，我正在尝试通过 javascript 将表格行添加到基本 .html 文件中的 html 表格的顶部

这是我的 javascript 代码：

var data = json.data;
for (var i = 0, len = data.length; i < len; i++) {
    var x = data[i];
    var newItem = document.createElement("tr");
    var textnode = document.innerHTML = '<th scope="row"> ' + x.granularity + '</th> <td> ' + x.instrument + '</td> <td>complete: ' + x.complete + ', type: ' + x.type + ', alerttimedate: ' + x.alerttimedate + ', firsttopbot: ' + x.firsttopbot + ', alertprice: ' + x.alertprice + ', firsttbprice: ' + x.firsttbprice + ', timestamp: ' + x.timestamp + ', proceesed: ' + x.proceesed + '</td>';
    newItem.appendChild(textnode);
    var list = document.getElementById("myList");
    list.insertBefore(newItem, list.childNodes[0]);
}

这是 html 文件中的表格：

<table class="table table-striped" id="myList">
  <tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
  </tr>
 </table>

var textnode = document.innerHTML 内容没有向我的 html 文件添加任何元素？？

任何想法我在这里做错了什么？

json 数据来自这种格式的 php 文件

 foreach ($result as $row) {
            $output[] = [
                'instrument' => $row['instrument'],
                'granularity' => $row['granularity'],
                'complete' => $row['complete'],
                'type' => $row['type'],
                'alerttimedate' => $row['alerttimedate'],
                'firsttopbot' => $row['firsttopbot'],
                'alertprice' => $row['alertprice'],
                'firsttbprice' => $row['firsttbprice'],
                'timestamp' => $row['timestamp'],
                'proceesed' => $row['proceesed']];

            $lastId = $row['id'];
        }

        echo json_encode([
            'status' => true,
            'data' => $output
        ]);

【问题讨论】：

您能分享一些示例 json 数据，以便我们轻松地重新创建它吗？（只需几个项目就足够了，不需要全部数据）
刚刚添加了json数据格式
应该将innerHTML分配给newItem

标签： javascript html arrays object

【解决方案1】：

由于缺乏编码，我不确定您实际需要什么，因此我针对您的问题开发了一个演示（据我了解）

// Placeholder JSON data
var data = {
  instrument: 'val1',
  granularity: 'val2',
  complete: 'val3',
  type: 'val4',
  alerttimedate: 'val5',
  firsttopbot: 'val6',
  alertprice: 'val7',
  firsttbprice: 'val8',
  timestamp: 'val9',
  proceesed: 'val10'
}

// Select the table
var tableData = document.querySelector("#tableData")

// Creating the `tr`s
var trHead = document.createElement("tr")
var trData = document.createElement("tr")

// Add the data
for (var key in data) {    
    if (data.hasOwnProperty(key)) {
            
        // Create th
        var th = document.createElement("th")
        th.innerText = key
      
        // Create td
        var td = document.createElement("td")
        td.innerText = data[key]
        
        // Append the `td` & `th` to the `tr`s
        trHead.appendChild(th)
        trData.appendChild(td)
    }
}

// Append both `tr`s to the `table`
tableData.appendChild(trHead)
tableData.appendChild(trData)

table {
  border: 1px solid #333;
  border-collapse: collapse
}
table tr td, table tr th {
  border: 1px solid #333;
  padding: 5px;
}

&lt;table id="tableData"&gt;&lt;/table&gt;

【讨论】：