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，所以对应于我想要实现div的id，所以我使用了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

点击＆lt;＆gt;并在此处发布代码。
修复代码，使其不会出错。你的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 个答案: