如何在Div中使用JavaScript實現Div？

我有一個ID與ID，我想實現4個div和每個5 divs。我合作過的代碼如下如何在Div中使用JavaScript實現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>"; 
     } 
    } 
});

通過每個格是有這麼相對應的ID我想要實現的股利，所以我已經使用了mainClass變量不同編號的方法。

對此的撬動是https://plnkr.co/edit/mbcRhnMLsCXDnLhndVQB?p=catalogue。

來源

2017-05-05 Ramana Uday

1.單擊'<>'並在此處發佈代碼。 2.修正代碼，以免錯誤發生。你的plunkr不起作用 - 你調用script main，但是加載script.js 3.你不能用「level - 」+ j來訪問任何東西;除非它存在於DOM中4不要混合使用jQuery和DOM訪問它非常混亂 – mplungjan

注意：標識符中不能有空格 – Satpal

我更新了我的plunker但仍然存在同樣的問題 –

點擊<>並張貼在這裏的代碼。
修復代碼，以免錯誤發生。你的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>

來源

2017-05-05 10:47:51 mplungjan

我不知道，但你想想jQuery的.prepend功能，這樣的事情

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

來源

2017-05-05 10:47:39

什麼

更改基於我的代碼，你會得到它的工作。

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

來源

2017-05-05 10:47:49 Oen44

像這樣的東西用jQuery可能工作

// Code goes here 
 

 
$(document).ready(function() { 
 
    var king = $("#king"); 
 
\t for(i=0;i<4;i++){ 
 
\t \t 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); 
 
\t } 
 
});

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

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

來源

2017-05-05 10:48:39

如何在Div中使用JavaScript實現Div？

回答

相關問題