如何使用JavaScript在Div内部实现Div？

Question

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

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

我不确定，但是您对jquery .prepend的看法是这样的

$('mainClass').prepend($('<div> new div </div>'));

Answer 2

根据我的代码更改代码，即可正常工作。

 $(document).ready(function() { var king = $('#king'); for (i = 0; i < 4; i++) { var j = i + 1; var node = document.createElement('li'); node.innerText = "Parent" + j; king.append(node); for (k = 0; k < 5; k++) { var nodeChild = document.createElement('li'); nodeChild.innerText = "Child" + k; node.append(nodeChild); } } });

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

Answer 3

单击<>并在此处发布代码。
修复代码，使其不会出现错误。 您的plunkr无法正常工作-您将脚本命名为main，但是加载了script.js
您无法使用“ level-” + j访问任何内容； 除非它存在于DOM中
不要混用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>

Answer 4

jQuery这样的东西可能会起作用

 // Code goes here $( document ).ready(function() { var king = $("#king"); for(i=0;i<4;i++){ var div = $("<div class='external'>external div:" + i + "</div>"); for(j=0;j<5;j++){ div.append("<div class='internal'>internal div:" + j +"</div>"); } king.append(div); } });

  .external{ background-color: lightblue; } .internal{ background-color:red; }

 <!DOCTYPE html> <html> <head> <title>Apple</title> </head> <body> <div id="king"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="main.js"></script> </body> </html>

如何使用JavaScript在Div内部实现Div？

问题描述

4 个解决方案

解决方案1
1 2017-05-05 10:47:39

解决方案2
1 2017-05-05 10:47:49

解决方案3
1 已采纳 2017-05-05 10:47:51

解决方案4
1 2017-05-05 10:48:39

如何使用JavaScript在Div内部实现Div？

问题描述

4 个解决方案

解决方案1 1 2017-05-05 10:47:39

解决方案2 1 2017-05-05 10:47:49

解决方案3 1 已采纳 2017-05-05 10:47:51

解决方案4 1 2017-05-05 10:48:39

解决方案1
1 2017-05-05 10:47:39

解决方案2
1 2017-05-05 10:47:49

解决方案3
1 已采纳 2017-05-05 10:47:51

解决方案4
1 2017-05-05 10:48:39