Wie kann man mit einer schleife <div> erstellen und die id wird auch höher Danke :)?

Dass heißt dass die schleife aufhöhrt bei 10 und dass dann 10 div s gibt der erste div hat dann

         <div id ="1"></div>
        <div id ="2"></div>
        <div id ="3"></div>
        <div id ="4"></div>
        <div id ="5"></div>

So dass man nach her z.B. document.getElementById("1").innerHTML="hallo" ; document.getElementById("3").innerHTML="wie" ;

Danke :)

Answer 1

[kim366]

http://www.w3schools.com/js/js_loop_for.asp

<script>
    for (i = 0; i < 10; i++) { 
       // div einfugen 
    }
</script>

Ohne JS ist das leider nicht moglich

Comments

[maxlllll]

ich möchte mit js (java-script) das ist einen normale for schleife? ab wie bekomme ich dass die id auch von 0-9 zählt?

[Sarkophator]

@maxlllll

Angenommen dein Wrapper für die divs hat die ID "div-wrapper":

function createDivElements() {
  //Niemals so allgemeine Variablen wie "i" in den globalen Scope, deklarieren
  //da es eine potentielle Fehlerquelle ist. Stattdessen in einen lexikalen
  //Scope setzen (bspw. durch eine Funktion oder durch das ECMA6-let Keyword, das
  //aber auch noch nicht überall unterstützt wird.
  for(var i = 0; i < 10; i++) {
    //Elemente wenn möglich immer über createElement erzeugen und mit appendChild
    //bzw. insertBefore dem DOM hinzufügen. innerHTML hat das Problem, dass der
    //Inhalt des Elements sonst nochmal neu geparsed werden muss, d.h. dass u.a.
    //EventHandler und Sonstiges verloren gehen.
    var elm = document.createElement("div");

    //Die ID darf laut Spezifikation NIE mit einer Zahl beginnen und erhält hier den 
    //Präfix "id". CSS Selektroen werden sonst nicht funktionieren und auch getElementById
    //garantiert keine Funktionalität, auch wenns sein kann das ein Browser das so
    //interpretiert wie du es möchtest. (Das muss der aber nicht.) querySelector wird einen
    //Fehler ausgeben.
    elm.id = "id"+i;

    //Inhalt des Elements festlegen
    //Notiz: innerHTML ist hier in Ordnung, da das Element frisch erstellt wurde und
    //       über keinen Inhalt verfügt. Hier werden also keine Verweise verloren gehen
    //       und wir können alles weitere dem Parser überlassen.
    elm.innerHTML = "<p>Erstelltes div-Element Nummer <strong>"+i+"</strong></p>";

    //Element dem DOM hinzufügen
    document.getElementById("div-wrapper").appendChild(elm);
  }
}

Hier, das sollte es tun. Im gleichen Schritt auch mal auf weitere wichtige Punkte eingegangen die bei sowas eigentlich zu beachten sind. (Je früher man das versteht, umso mehr Arbeit erspart man sich später mit haarigen Fehlern die passieren, wenn mans falsch macht.)

Wobei dir jQuery das Erstellen des Elements auf einen Einzeiler reduzieren kann:

$("#div-wrapper").append('<div id="id'+i+'"><p>Erstelltest div-Element Nummer <strong>'+i+'</strong></p></div>');

Demo:

https://jsfiddle.net/87sberpg/

[maxlllll]

@Sarkophator

Danke vielmals ist genau das was ich wollte und eine top Erklärung dazu :)

[maxlllll]

@Sarkophator

Hey wenn ich den script kopiere dann bekomme ich im Browser die  Fehlermeldung 

null is not an object (evaluating 'document.getElementById("div-wrapper").appendChild')

weißt du was da falsch sein kann

Answer 2

[Aren89]

For schleife bauen die von 1 bis 10 zählt und da drin in den Body das div mit der aktuellen Nummer als id anhängen

Comments

[maxlllll]

genau das ist es