1

私は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");

        }

どんな助けでも大歓迎です。

4

5 に答える 5

0 
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-02T13:38:39.870 に答える
0

以下は、親コンテナ、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-02T13:45:19.233 に答える
0

ネストされた構造を取得するには、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-02T13:24:24.967 に答える
0

document.createElement("div")( document, not )を介して div を作成しましたが、それらを親ノードに配置するdoc必要があります。.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...
于 2012-08-02T13:24:32.380 に答える
0

ええ、それで問題は何ですか？要素を作成したら、Javascript のネイティブappendChildメソッドで要素を追加します。

parent = document.getElementById("parentdiv");
parent.appendChild(firstContainer);
于 2012-08-02T13:25:24.017 に答える