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

我对JS很陌生，这就是为什么我需要一些帮助。我想创建多个嵌套的div元素是这样的：使用JavaScript的函数添加多个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"); 

     }

任何帮助表示赞赏。

来源

2012-08-02 JSNewbie

你应该使用原生js吗？或者你可以使用像jQuery的框架？他是否说过他不喜欢什么？他的意思是真正的功能还是js中的对象？ – alphanyx 2012-08-02 13:22:22

你需要创建一个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/

来源

2012-08-02 13:24:24

您已通过document.createElement("div")（document，不doc创建您的div ），但你需要.appendChild()他们到他们的父节点。我建议不要尝试将这些创建包装到原来的功能中，直到您对它们的创建和嵌套方式有了很好的理解。

See it in action ...

// 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...

来源

2012-08-02 13:24:32

呀，有啥问题？您已经创建的元素，现在通过JavaScript的本地appendChild方法追加他们：

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

来源

2012-08-02 13:25:24 SexyBeast

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/

来源

2012-08-02 13:38:39 ted

下面是将创建一个父容器的功能， 3个子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); 
    } 

})();

这是一个jsFiddle，说明了这一点。

来源

2012-08-02 13:45:19

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

回答

相关问题