javascript - for循环中的innerHTML未正确附加元素

Question

这个问题已经有答案了:

innerHTML elements in wrong place (2 个回答)

已关闭 5 年前。

我正在尝试通过 innerHTML 附加表中对象的数据在 for循环但它不会将其附加到表中；而是将数据附加到表格之后

这是我的代码:

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>';
}

<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>

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

Answer 1

当您为 innerHTML 赋值时，它被解析为 HTML 并转换为 DOM。

这会执行错误恢复并插入诸如丢失的 </table> 之类的内容

当您读取它时，DOM 会转换为 HTML(并将包括所有规范化和纠错)。

+= ，记住，从中读取以获取字符串，修改该字符串，然后将新字符串分配回来。除了抽象意义上之外，它不会“附加”。

<小时/>

如果您想附加内容:不要使用innerHTML。

使用createElement , appendChild等等。