如何使用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