String duplizieren mehrfach verwenden.

[Kevin R.]

Hallo,

für eine Dynamische erstellung für DIV's speichere ich ein div in einer JS Variable ganz normal als String
var div = '<div class="bla"></div>

Nun möchte ich diesen String mehrfach ausgeben. Denn ich stelle dass div
in einem Main Div dar.

  
document.getElementById('main').innerHTML = div ;  

Nun möchte ich aber, dass ich denn div nicht nur einmal darstellen kann sondern ob es die möglichkeit gibt, denn als String gespeicherten DIV, duplizieren kann.

Dazu weiß ich natürlich, dass es so funktioniert:

  
document.getElementById('main').innerHTML = div + div ;  

,dass möchte ich aber nicht, denn sonst müsste ich 140 die Variable hinschreiben.

Gibt es eine möglichkeit den div sozusagen zu "multiplizieren"?

[Gunnar Bittersmann]

@@Kevin R.:

nuqneH

dass möchte ich aber nicht, denn sonst müsste ich 140 die Variable hinschreiben.

Gibt es eine möglichkeit den div sozusagen zu "multiplizieren"?

In einer http://de.selfhtml.org/javascript/sprache/schleifen.htm@title=Schleife den Ergebnisstring http://de.selfhtml.org/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung@title=zusammensetzen, dann ausgeben.

Wenn alle 140 div der Klasse "bla" angehören, dann ist diese vermutlich überflüssig.

Qapla'

[Kevin R.]

@@Kevin R.:

nuqneH

dass möchte ich aber nicht, denn sonst müsste ich 140 die Variable hinschreiben.

Gibt es eine möglichkeit den div sozusagen zu "multiplizieren"?

In einer http://de.selfhtml.org/javascript/sprache/schleifen.htm@title=Schleife den Ergebnisstring http://de.selfhtml.org/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung@title=zusammensetzen, dann ausgeben.

Wenn alle 140 div der Klasse "bla" angehören, dann ist diese vermutlich überflüssig.

Qapla'

Meinst du das so?

  
    var vorgabe = '5'  
    var counter = '0'  
    var anzahl = '142'  
  
    var divs = '<div id="d1_1"></div>'  
    var pp  
    for (var i = 0; i<anzahl; i++){  
         pp[i] = divs;  
    while(counter < vorgabe) {  
        document.getElementById('main').innerHTML = divs;  
        counter++  
    }  
}  

funktioniert bei mir leider nicht.
Kannst du mir einen weiteren Hinweis geben?

[MudGuard]

Hi,

Meinst du das so?

var vorgabe = '5'
    var counter = '0'
    var anzahl = '142'

var divs = '<div id="d1_1"></div>'
    var pp
    for (var i = 0; i<anzahl; i++){
         pp[i] = divs;
    while(counter < vorgabe) {
        document.getElementById('main').innerHTML = divs;
        counter++
    }
}

  
Nein. Das ergibt überhaupt keinen Sinn. Selbst wenn es funktionieren würde, wie Du es haben willst, hättest Du dann 142 divs, die alle dieselbe ID hätten. ID-Werte müssen aber eindeutig sein.  
Wozu machst Du zwei geschachtelte Schleifen?  
Was willst Du eigentlich mit hunderten divs? Div-Suppe erzeugen?  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[Kevin R.]

Hallo,
ich benötige ein Karriertes Feld mit DIVS, dazu benötige ich dass.
Wie wäre es denn möglich, dass ich diesen String mehrfach bzw. dupliziert darstellen kann?

[MudGuard]

Hi,

ich benötige ein Karriertes Feld mit DIVS,

Du meinst so ein Ding mit Zeilen und Spalten?
Das nennt sich table (mit tbody, tr, td, th ...)

Wie wäre es denn möglich, dass ich diesen String mehrfach bzw. dupliziert darstellen kann?

Das hat Gunnar doch bereits geschrieben.

cu,
Andreas

[Kevin Rohn]

Oki entschuldigt mich.

Das mit den Divs ist ja relativ egal.
Ich wollte ja eigentlich nur wissen, wie ich einen String "duplizieren" kann,
und diesen dann auch noch in einer anderen schleife aufrufen kann.
Schade, alleine bekomme ich dass wohl leider nicht hin.

[Gunnar Bittersmann]

@@Kevin Rohn:

nuqneH

Schade, alleine bekomme ich dass wohl leider nicht hin.

Schade, wenn du nicht erklären kannst, was „das“* ist, können wir dir nicht weiterhelfen.

Wie soll das Ergebnis im Browser visuell aussehen?

Wie soll das generierte HTML aussehen?

Qapla'

* mit einem S

[Kevin R.]

Also, ich habe ein "Main" Div.
in diesem möchte ich 140 rechteckige divs.
Diese Divs möchte ich dynamisch erstellen.

Bisher gehe ich so vor:

  
    var vorgabe = '5'  
    var counter = '0'  
    var anzahl = '142'  
  
    var divs = '<div class="d1_1"></div>'  
  
  
  
    while(counter < vorgabe) {  
        document.getElementById('main').innerHTML = divs;  
        counter++  
  
    }  

Dadurch bekomme ich ein div im main div angezeigt, was ja logisch erscheint.
Nun nöchte ich aber denn String von Variable divs 140x "duplizieren".
Wie kann ich vorgehen?

[Steel]

Moin!

Wie kann ich vorgehen?

Den Inhalt des Maindivs nicht mit dem neuen Div ueberschreiben sondern die neuen Divs hinten dranhaengen. Wo ist Dein Problem? Keine <http://de.selfhtml.org/javascript/sprache/operatoren.htm#zeichenkettenverknuepfung@title=Dokumentation zum verketten von Strings> gefunden?

Alternativ kannst Du auch das DOM modifizieren. Was Du aber auf keinen Fall vergessen darfst: eindeutige IDs zuweisen.

[MudGuard]

Hi,

Den Inhalt des Maindivs nicht mit dem neuen Div ueberschreiben sondern die neuen Divs hinten dranhaengen.

Schlechte Idee.
Im ersten Durchlauf wird ein div erzeugt und eingehängt.
Das wird im zweiten Durchlauf weggeworfen, dafür werden 2 divs erzeugt und eingehängt.
Im dritten Durchlauf werden 2 divs weggeworfen, dafür werden 3 divs erzeugt und eingehängt.
usw.
Es werden also 1 + 2 + 3 + 4 + ... + 141 + 142 divs erzeugt, davon sind 1 + 2 + 3 + ... + 141 überflüssig, weil sie im nächsten Schritt zerstört werden.

Wenn ich mich richtig erinnere: n*(n+1)/2   (oder war's n*(n-1)/2 ?)
141*142/2 = 141*71 = 10011 überflüssig erzeugte divs müssen nicht sein ...

Wenn man das schon mit innerHTML macht, dann sollte man erst den String zusammenbauen und ihn dann einmal per innerHTML einhängen.

Alternativ kannst Du auch das DOM modifizieren. Was Du aber auf keinen Fall vergessen darfst: eindeutige IDs zuweisen.

Nur dann, wenn überhaupt ids benötigt werden.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Wenn ich mich richtig erinnere: n*(n+1)/2   (oder war's n*(n-1)/2 ?)

Plus passt schon, wovon man sich bei 1 + 2 leicht überzeugen kann. Jaja, der gute alte CFG.

Qapla'

[Steel]

Moin!

Hm. Vielleicht hab ich mich da nicht konkret genug ausgedrueckt. Auch ohne den kleinen Gauss kommt man drauf, dass so ne Menge unnoetiges Zeug veranstaltet wird. Aehnlich wie jetzt wo allerdings nur ein Div n mal ueberschrieben wird.

Ich meinte schon, die Strings zu addieren und dann einzufuegen.

[Gunnar Bittersmann]

@@Kevin R.:

nuqneH

in diesem möchte ich 140 rechteckige divs.

Das schriebst du bereits am Anfang. Später sagtest du was von „kariertem* Feld“.

Wie kann ich vorgehen?

Meine Fragen beantworten.

Qapla'

* mit einem R

[Vinzenz Mai]

Hallo,

Bisher gehe ich so vor:

// Deine Variable "divs" enthält nach folgender Anweisung

var divs = '<div class="d1_1"></div>'

wieviele "divs"? Richtig: eines.

Hier überschreibst Du 142-fach die innerHTML-Eigenschaft eines Elementes mit der id "main":

while(counter < vorgabe) {
        document.getElementById('main').innerHTML = divs;
        counter++

}

  
Statt dessen möchtest Du in einer Variablen zuallererst in einer Schleife das entsprechende HTML zusammensetzen - und \*nach\* der Schleife ein einziges Mal die resultierende Zeichenkette der innerHTML-Eigenschaft zuweisen.  
  
Pseudocode:  
  
gesamteKästchen := leere Zeichenkette  
einEintrag      := '<div class="d1\_1"></div>'  
für die gewünschte Anzahl von Einträgen  
     hänge den Inhalt von einEintrag an den Inhalt von gesamteKästchen an  
ende für  
weise der innerHTML-Eigenschaft den Inhalt von gesamteKästchen zu  
  
  
Freundliche Grüße  
  
Vinzenz

[Kevin R.]

Schonmal vielen Dank  für deinen Beitrag. Aber ich habe dass nun so verstanden:

  
    var divs = '<div class="d1_1"></div>'  
    var pp_divs = divs + divs + divs +divs +divs;  
    while(counter < vorgabe) {  
        document.getElementById('main').innerHTML = pp_divs;  
        counter++  
    }  

Kannst du mir sagen, wie ich diese Zuweisen für pp_divs in einer Schleife mache?

[Gunnar Bittersmann]

@@Kevin R.:

nuqneH

Kannst du mir sagen, wie ich diese Zuweisen für pp_divs in einer Schleife mache?

Das wurde dir bereits gesagt. Nicht nur einmal, sondern sogar schon zweimal.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Noch ein Tip: Vor der Schleife setzt du die Variable für den Ergebnisstring auf einen Leerstring. In der Schleife hängst du an den Ergebnisstring jeweils einmal den Code für ein div an.

Dabei dürfte auch die http://de.selfhtml.org/javascript/sprache/operatoren.htm#berechnung@title=Kurzschreibweise hilfreich sein.

Qapla'

[molily]

document.getElementById('main').innerHTML = div + div ;

  
document.getElementById('main').innerHTML = new Array(140 + 1).join(div);  
  
Mathias

[Vinzenz Mai]

Hallo Mathias,

document.getElementById('main').innerHTML = new http://de.selfhtml.org/javascript/objekte/array.htm#allgemeines@title=Array(140 + 1).http://de.selfhtml.org/javascript/objekte/array.htm#join@title=join(div);

schicke Idee, den eigentlichen Text einfach als Trennzeichen zu verwenden.
Viel eleganter als mein typisch prozeduraler Ansatz.

Freundliche Grüße

Vinzenz

[molily]

schicke Idee

Hab ich geklaut, natürlich.

Mathias