Viele Elemente auf einmal erstellen/kopieren

[DerNeuling21]

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.

<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]

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

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