Ich brauche divs mit verschachtelten divs erstellen Inneren

Question

einen Blick auf den Code haben

Html-Code:

<div class="container content-rows" id="contentdisplay"> 
<div class="col-md-1" id="snocontent">abcd</div> 
<div class="col-md-3" id="pgnamecontent">abcd</div> 
<div class="col-md-3" id="cmpcontent">abcd</div> 
<div class="col-md-2" id="datecontent">abcd</div> 
<div> 
    <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span></button> 
    <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span></button> 
    <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span> 
    <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span> 
</div> 

Javascript-Code:

function createdivs() { 
     var i; 
    for (i = 0;i < 10;i++) 
    { 
     divc = "<div>.container.content-rows"; 
     var list = document.createElement("divc"); 
     document.body.appendChild(list); 
     list.className = "proglist"; 

    } 
} 

ich ein paar Fragen haben, bitte klären Sie sie oder erklären Sie mit Code:

1. 10 divcs sind erstellt, aber es gibt keine anderen div Elemente in ihnen, nur das erste div hat einige Inhalte in ihm .. andere divs sind nur erstellt und sie dnt sogar Platz in der Webseite

2. Ich möchte das div zu ausgerichtet werden, um das erste div, dh., statt document.body.appendChild ich so etwas wie document.div.appendChild müssen, während die erstellt divs mit dem ersten div appeneded werden sollte ..

Bitte lassen Sie mich wissen, wie kann ich sie mit Erklärung erhalten .. Vielen Dank im Voraus ..

Answer 1

10 DIVC die erstellt werden, aber es gibt keine andere div Elemente in ihnen, nur das erste div darin einige Inhalte hat .. andere divs sind gerade erstellt und sie dnt sogar Raum innerhalb der Webseite

Raum zu besetzen ist nicht besetzt, weil ihnen kein Inhalt hinzugefügt wurde. Sie fügen Inhalt zu einem Element hinzu, wie Sie es zum Beispiel mit document.body - appendChild() tun.

Ich mag, dass der div mit dem ersten div ausgerichtet werden, dh., Statt document.body.appendChild ich so etwas wie document.div.appendChild muß, während die erstellt divs mit dem ersten div appeneded werden soll. .

Elemente haben, ein solches Verfahren:

function createdivs() { 
 
     var i; 
 
     for (i = 0; i < 10; i++) { 
 
     divc = "<div>.container.content-rows"; 
 
     var divc = document.createElement("div"); 
 
     divc.classList.add("container"); 
 
     divc.classList.add("content-rows"); 
 
     divc.classList.add("proglist"); 
 
     divc.textContent = "I'm div #" + i; 
 
     document.getElementById('contentdisplay').appendChild(divc); 
 
     createNestedDivs(divc); 
 
     } 
 
    } 
 

 
    function createNestedDivs(selector) { 
 
     function appendToNode(node, content) { 
 
     // ideally content would also be a Node, but for simplicity, 
 
     // I'm assuming it's a string. 
 
     var inner = document.createElement('span'); 
 
     inner.textContent = content; 
 
     node.appendChild(inner); 
 
     } 
 

 
     if (selector instanceof Node) { 
 
     appendToNode(selector, "inner"); 
 
     return; 
 
     } 
 

 
     var selected = Array.prototype.slice.call(document.querySelectorAll(selector)); 
 
     selected.forEach(function(el) { 
 
     appendToNode(el, "inner"); 
 
     }); 
 
    }

<div class="container content-rows" id="contentdisplay"> 
 
    <div class="col-md-1" id="snocontent">abcd</div> 
 
    <div class="col-md-3" id="pgnamecontent">abcd</div> 
 
    <div class="col-md-3" id="cmpcontent">abcd</div> 
 
    <div class="col-md-2" id="datecontent">abcd</div> 
 
    <div> 
 
    <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span> 
 
    </button> 
 
    <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span> 
 
    </button> <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span> 
 
    <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span> 
 

 
    </div>

Der createNestedDivs() Funktion kümmert sich darum, wenn Sie jedem erstellten Element ein weiteres Kind hinzufügen möchten. Sie können es eine Node oder string übergeben und es wird sie wie erwartet behandeln. createNestedDivs() funktioniert nach den gleichen Prinzipien wie die Änderungen, die ich an createdivs() vorgenommen habe. Der Fall für eine Node Handhabung ist einfach genug, aber die string Handhabung ist etwas weniger klar:

• Die Array.prototype.slice.call ist notwendig, weil document.querySelectorAll eine NodeList gibt, die kein Array ist, und ich kann nicht Array.prototype.forEach() verwenden darauf.

Auch im Zusammenhang Lesen hier: http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript