使用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元素

回答

相關問題