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

Adding multiple DIV elements using functions with JavaScript

本文关键字：DIV 元素 添加 JavaScript 函数 使用      更新时间：2023-09-26

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

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

我已经创建了它们，但我在工作中的导师希望我使用函数，以便代码可读性更强。

我已经尝试为创建的每个元素创建多个函数，但他告诉我他不喜欢，希望我尝试另一种方式。所以这就是我请求帮助的原因。我已经尝试过了（这只是一个样本，没有显示实际代码的权限…公司规则）：

        function firstContainerCreator(){
            firstContainer= doc.createElement("div");
        }
        function innerContainerCreator(){
            innerContainer= doc.createElement("div");
        }
        function innerContainer_imgCreator(){
            innerContainer_img= doc.createElement("div");

        }
        function innerContainer_paragraphCreator(){
            innerContainer_paragraph= doc.createElement("div");
        }

感谢您的帮助。

是的，那么问题出在哪里呢？您已经创建了元素，现在通过Javascript的原生appendChild方法将其附加：

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

您需要创建一个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);

小提琴，例如：http://jsfiddle.net/Nwc3s/9/

您已经通过document.createElement("div")（document，而不是doc）创建了div，但您需要将它们.appendChild()到它们的父节点上。我建议您不要像最初那样将这些函数的创建打包到函数中，直到您对它们的创建和嵌套有了很好的了解。

在行动中看到它。。。

// The outer div:
var outer_container = document.createElement("div");
// Append it onto the body
document.body.appendChild(outer_container);
// Main inner div
var main_inner = document.createElement("div");
// Append to outer
outer_container.appendChild(main_inner);
// First innermost div
var first_inner = document.createElement("div");
// Second innermost div
var second_inner = document.createElement("div");
// append to main inner div
main_inner.appendChild(first_inner);
main_inner.appendChild(second_inner);
// etc...

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>

http://jsfiddle.net/9FMPv/9/

下面是一个函数，它将为每个子div创建一个父容器、3个子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);
  }
})();​

这里有一个jsFiddle来说明这一点。

相关文章：