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>

Answer 2

这是否在这里，并没有抛出任何错误。

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

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

在动态创建div

2 个答案: