javascript - 如何使用 JavaScript 在 Div 中实现 Div？

Question

我有一个带有 id 的 div，我想在其中实现 4 个 div，并且每个 div 实现 5 个。我使用过的代码如下

$( document ).ready(function() {
    for(i=0;i<4;i++){
        j=i+1;
        document.getElementById("king").innerHTML += "<div id='level"+" "+"level--"+j+"'"+"></div>";
        var mainClass = "level--"+j;
        for(k=0;k<5;k++){
            console.log(mainClass);
            document.getElementById(mainClass).innerHTML += "<div></div>";
        }
    }
});

顺便说一句，每个 div 都有不同的 id，因此与该 id 相对应，我想实现该 div，因此我使用了 mainClass 变量。

这个骗子是 https://plnkr.co/edit/mbcRhnMLsCXDnLhndVQB?p=catalogue .

Answer 1

1. 单击 <> 并在此处发布代码。
2. 修复代码，使其不会出现错误。你的 plunkr 不起作用 - 你调用脚本 main 但加载 script.js
3. 您无法使用“level--”+j访问任何内容；除非它存在于 DOM 中
4. 不要混合使用 jQuery 和 DOM 访问，这会很困惑

$(document).ready(function() {
  for (var i = 0; i < 4; i++) {
    id = "level--" + (i + 1);
    $("#king").append("<div id='" + id + "'>"+id+"</div>");
    var $mainclass = $("#" + id);
    for (var k = 0; k < 5; k++) {
      $mainclass.append("<div>"+k+"</div>");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="king"></div>