javascript - only one root element is allowed 动态创建div时出错

Question

这是我的代码:

function AddDivs() {
  var MainDiv = document.createElement('div');
  MainDiv.style.width = "1000px;"
  MainDiv.style.marginTop = "200px;"
  document.getElementById('contentarea').appendChild(MainDiv);
  }

“Contentarea”是一个已经存在的 div。我想添加多个“MainDiv”。我的代码在document.ready中执行

我得到这个“只允许一个根元素”的错误。

有什么线索吗？

这是我的html

        <div class="container-fluid" id="contentarea">
        <div style="width:1000px;">
            <div id="chart5" style="float:left !important; margin-top:10px;"></div>     
            <div id="chart10" style="float:left !important; margin-top:10px; margin-left:20px;"></div>  
            <div id="chart15" style="float:left !important; margin-top:10px; margin-left:20px;"></div>  
            <div id="chart16" style="float:left !important; margin-top:10px; margin-left:20px;"></div>  
        </div>    
        <div style="width:1000px; margin-top:200px;">
            <div id="chartUitval5" style="float:left !important; margin-top:10px;"></div>   
            <div id="chartUitval10" style="float:left !important; margin-top:10px; margin-left:20px;"></div>    
            <div id="chartUitval15" style="float:left !important; margin-top:10px; margin-left:20px;"></div>    
            <div id="chartUitval16" style="float:left !important; margin-top:10px; margin-left:20px;"></div>    
        </div>    
    </div>

Answer 1

这是程序，非常简单:

function AddDivs(x) {
    var MainDiv = document.createElement('div');
    MainDiv.style.width = "1000px;";
    MainDiv.style.marginTop = "200px;";
    MainDiv.innerHTML = "Hello my id is " + x;
    var id = "injectedDiv" + x;
    MainDiv.setAttribute("id" , id);
    document.getElementById('contentarea').appendChild(MainDiv);
}

$(document).ready(function() { 

  for (var x = 0;x < 10;x++) {
    AddDivs(x);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentarea" style="-webkit-box-shadow: 0px 2px 31px 29px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 31px 29px rgba(0,0,0,0.75);
box-shadow: 0px 2px 31px 29px rgba(0,0,0,0.75);"  ></div>