Ich weiß, dass ich das mit statischem HTML machen kann, aber ich möchte dynamisch erstellen, und ich kämpfe sehr. Hier ist, was ich machen möchte: Ich habe 2 Divs.
%Vor% Innerhalb jedes div möchte ich mehrere Absätze haben. Sagen wir 10 in jedem div.
Das erste div mit der Klasse "TxtTile" Ich möchte den Titel etwas haben, sagen wir Titel wie Alter, Land, Erfahrung, Straße usw. Im anderen div mit der Klasse 'pInfo' möchte ich die Informationen enthalten, die TxTtitle entsprechen .
Wie, Alter 25, Erfahrung 10 Jahre usw., das wird von lokalen Speicher genommen werden, wo ich es bereits eingerichtet habe. Diese zwei divs werden nebeneinander sein, was ich schon mit css gemacht habe.
Zum Beispiel. Linke Seite
%Vor%Ich wäre glücklich, wenn ich das mit nativen js machen könnte.
Sie können dies auf zwei Arten tun:
1) Sie können ein Element erstellen und es an seinen Platz anfügen
Erhalte zuerst das div-Element, in dem du ein neues Element erstellen willst. Hier anstatt eine Klasse zu haben, würde ich eine ID-basierte Auswahl des Elements bevorzugen
%Vor% Erstellen Sie ein p -Element und fügen Sie eine Klasse hinzu, Sie können auf ähnliche Weise auch Inhalt darin einfügen
Füge das erstellte Element in dein div ein
%Vor%2) Erstellen Sie eine HTML-Vorlage. Übergeben Sie Ihre Werte an diese Vorlage und erstellen Sie innerHTML und fügen Sie diese innerHTML direkt in Ihr übergeordnetes Element ein
%Vor%Wenn Sie viele Elemente hinzufügen, ist der zweite Ansatz viel besser, da das Erstellen eines einzelnen Elements und das Anhängen an die DOM-Struktur ziemlich langsam ist und dann die gesamte HTML-Zeichenfolge übergeben wird.
Ich denke, das ist eine schlechte Idee, dies zu tun, wenn Sie mehrere Datensätze haben, die Sie dann nicht mit querySlector behandeln können.
gute Idee ist ein Elternelement wie folgt zu erstellen
%Vor%dann holen Sie sich dieses Element per Javascript und hängen Sie dann dieses Element mit Ihren dynamischen Datensätzen wie folgt an
%Vor%Wenden Sie Schleife an, wenn Datensätze mehrere sind
%Vor%Tags und Links javascript html css