Question

我正尝试在innerHTML循环中通过for附加表格中对象的数据，但它并未将其附加到表格中;而是在表格

之后附加数据

这是我的代码：

＆＃13;

var data = {	"video": false,
	            "vote_average": 8.300000000000001,
	            "vote_count": 9363}

var collection = Object.entries(data);
// console.log(document.domain); 
var showData = document.getElementById('showData');
document.addEventListener('DOMContentLoaded', ExecuteMe);

function ExecuteMe(){
  showData.innerHTML += '<table class="table table-inverse">'+
                        '<thead><tr><th>Key</th><th>Value</th></tr></thead><tbody>';
  
  feedData();
}

function feedData(){
  for(var i=0;i<collection.length;i++){
    showData.innerHTML += '<tr><td>' +
        collection[i][0] + '</td><td>' + collection[i][1] +' </td></tr>'; 
  } 
  showData.innerHTML += '</tbody></table>';
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="showData"></div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

为什么不将数据附加到单独的行中？

Answer 1

为innerHTML分配值时，会将其解析为HTML并转换为DOM。

执行错误恢复并插入缺少</table>

之类的内容

当您从中读取时，DOM将转换为HTML（并将包括所有规范化和纠错）。

+=，请记住，从中读取以获取字符串，修改字符串，然后重新分配新字符串。它没有＆＃34;追加＆＃34;除了抽象意义外。

如果你想追加东西：不要使用innerHTML 。

使用createElement，appendChild等。

for循环中的innerHTML没有正确附加元素

1 个答案: