Viele Elemente auf einmal erstellen/kopieren

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
15 September 2017
41
0
6
18
#1
Hallo zusammen,

für ein persönliches CRM (Übungs-)Projekt habe ich jetzt eine Frage zu Java Script und seinen Funktionen.

Ich habe bei der Kontakt Erstellung ein Div mit den ganzen Input Feldern für die Ansprechpartner. Diese Elemente sollen mit einem Klick auf "Hinzufügen" x mal neu erstellt werden.

Dabei muss natürlich auch bei den Input Feldern der name="" hoch gezählt werden. Jetzt stell ich mir die Frage, wie ich das am Besten anstelle.

Ich dachte schon an .children() oder .createElement(), aber dabei wird sehr viel Code benötigt damit ich alle Elemente mit einer neuen "name" erstellt habe.

HTML:
<div>
                        <div class="Input-Row">
                            <label class="Input-Label">Anrede</label>
                            <input list="contact-Person-salutaion" class="Input-Field" placeholder="Anrede">
                            <datalist id="contact-Person-salutaion">
                            <option value="Herr">
                            <option value="Frau">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-first-Name" class="Input-Label">Vorname</label>
                            <input type="textbox" class="Input-Field" placeholder="Vorname" id="contact-Person-first-Name">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-last-Name" class="Input-Label">Nachname</label>
                            <input type="textbox" class="Input-Field" placeholder="Nachname" id="contact-Person-last-Name">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-Phone-Number" class="Input-Label">Telefon</label>
                            <input type="textbox" class="Input-Field" placeholder="Telefon" id="contact-Person-Phone-Number">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-Phone-Mobile" class="Input-Label">Mobil</label>
                            <input type="textbox" class="Input-Field" placeholder="Mobil" id="contact-Person-Phone-Mobile">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-Email" class="Input-Label">E-Mail</label>
                            <input type="textbox" class="Input-Field" placeholder="E-Mail" id="contact-Person-Email">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-Function" class="Input-Label">Funktion</label>
                            <input type="textbox" class="Input-Field" placeholder="Funktion" id="contact-Person-Function">
                        </div>
                        <div class="Input-Row">
                            <label for="contact-Person-Comment" class="Input-Label">Bemerkung</label>
                            <input type="textbox" class="Input-Field" placeholder="Bemerkung" id="contact-Person-Comment">
                        </div>
                    </div>
Wie kann ich mit möglichst wenig Code dieses Div mit hochgezählten "name" kopieren/erstellen ?

Danke für eure Hilfe.
 

basti1012

Aktives Mitglied
26 November 2017
742
70
28
37
Minden
chat.sebastian1012.bplaced.net
#2
Ich würde createElement und vieleicht eine Schleife verwenden für die inneren divs.
Erst ein Hauptcontainer erstellen und da drinne die anderen Punkte mit einer Schleife
Du mußt beim ersteleln nur drauf achten das du keine doppelten ids hast .
Solltest du wie du schon sagst dann immer ein hoch zählen
Code:
hauptcontainer=document.getElementsByTagName('body')[0];
divhaupt=document.createElement('div');
divhaupt.id="hauptcontainer1";
divhaupt.innerHTML='test';
hauptcontainer.appendChild(divhaupt);

for(a=0;a<=5;a++){
hauptcontainer=document.getElementById('hauptcontainer1');
div=document.createElement('div');
div.id="id"+a;
div.innerHTML="hallo inhalt "+a+"";
hauptcontainer.appendChild(div);
}
So in der Art oder so würde ich es machen.
Aber es gibt auch genug andere wege
 
Zuletzt bearbeitet: