使用JavaScript函数添加多个DIV元素_Javascript

使用JavaScript函数添加多个DIV元素

javascript

使用JavaScript函数添加多个DIV元素,javascript,Javascript,我对JS有点陌生，这就是为什么我在这方面寻求一些帮助。我想创建多个嵌套的div元素，如下所示： <div> <div> <div> </div> <div> </div> </div> </div> 非常感谢您的帮助。您需要创建一个DIV，然后在其中附加子项以获得嵌套结构： // create the outer div var parentDiv =

我对JS有点陌生，这就是为什么我在这方面寻求一些帮助。我想创建多个嵌套的div元素，如下所示：

<div>
  <div>

    <div>
    </div>

    <div>
    </div>

  </div>
</div>

非常感谢您的帮助。

您需要创建一个DIV，然后在其中附加子项以获得嵌套结构：

// create the outer div
var parentDiv = document.createElement("div");

// create the inner divs
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");

// now append the child divs to the parent
parentDiv.appendChild(childDiv1);
parentDiv.appendChild(childDiv2);

例如：

您已经通过

document.createElement（“div”）

（

document

，而不是

doc

）创建了div，但是您需要将它们放到父节点上。我建议不要像最初那样尝试将这些函数的创建包装到函数中，直到您对它们是如何创建和嵌套的有了很好的理解

是的，那有什么问题？您已经创建了元素，现在通过Javascript的本机

appendChild

方法将它们追加：

parent = document.getElementById("parentdiv");
parent.appendChild(firstContainer);

函数createDivNode（parentNode）{
//如果没有父div用作父div
如果（！parentNode）var parentNode=document.body；
var el=document.createElement（'div'）；
parentNode.appendChild（el）；
返回el；
}
var outer=createDivNode（）；
var inner1=createDivNode（外部）；
var inner2=createDivNode（外部）；

输出：

<body>
  <div>
    <div></div>
    <div></div>
  </div>
</body>

下面是一个函数，它将为每个子div创建一个父容器、三个子div和一个孙div

var createDivs = (function() {
  var parent = document.createElement('div'),
    children = 3,
    // change this number to reflect how many child divs you need
    gchildren = 3,
    // same with this
    i = 0;
  document.body.appendChild(parent);
  this.appendGChild = function(child) {
    console.log(child);
    var gchild = document.createElement('div'),
        i = 0;
    for (i = gchildren; i--;) {
        child.appendChild(gchild);
    }
  }
  for (i = children; i--;) {
    var child = document.createElement('div');
    parent.appendChild(child);
    appendGChild(child);
  }

})();

这里有一个例子说明了这一点。

您应该使用原始js吗？或者可以使用jquery之类的框架？他有没有说他到底不喜欢什么？他指的是js中的函数还是对象？

function createDivNode(parentNode){
    // in case no parent div use <body> as parent
    if (!parentNode) var parentNode = document.body;
    var el = document.createElement('div');
    parentNode.appendChild( el );
    return el;
}

var outer = createDivNode();
var inner1 = createDivNode(outer);
var inner2 = createDivNode(outer);

<body>
  <div>
    <div></div>
    <div></div>
  </div>
</body>

var createDivs = (function() {
  var parent = document.createElement('div'),
    children = 3,
    // change this number to reflect how many child divs you need
    gchildren = 3,
    // same with this
    i = 0;
  document.body.appendChild(parent);
  this.appendGChild = function(child) {
    console.log(child);
    var gchild = document.createElement('div'),
        i = 0;
    for (i = gchildren; i--;) {
        child.appendChild(gchild);
    }
  }
  for (i = children; i--;) {
    var child = document.createElement('div');
    parent.appendChild(child);
    appendGChild(child);
  }

})();