So erstellen Sie ein Textfeld dynamisch in JavaScript

Manche nennen es Magie - die Fähigkeit, Objekte plötzlich aus dem Nichts erscheinen zu lassen. Sie können diese Art von Magie auf Ihrer Website mit ein paar Zeilen JavaScript erstellen. Textfelder sind beispielsweise gute HTML-Elemente, wenn Sie lernen, Objekte dynamisch erscheinen zu lassen. Fügen Sie Textfelder nach Bedarf hinzu und beeindrucken Sie gleichzeitig die Website-Besucher, anstatt sie beim Entwerfen Ihrer Webseite in Ihren Code zu integrieren.

Textfelderstellung

Bevor Sie ein Textfeld materialisieren, müssen Sie verstehen, was ein Textfeld ist. HTML kennt es als Eingabe-Tag, wie im folgenden Beispiel gezeigt:

Dieses Eingabe-Tag erstellt ein Textfeld mit zwei wichtigen Attributen. ID und Typ. Das type-Attribut, dessen Wert "text" ist, weist die Browser an, ein Textfeld anstelle eines anderen Steuerelementtyps wie einer Schaltfläche zu erstellen. Das optionale ID-Attribut kann nützlich sein, wenn Sie das Textfeld später bearbeiten müssen. Die Wertoption, die ebenfalls optional ist, enthält den Wert, den Sie beim Öffnen der Webseite im Textfeld sehen möchten.

Dynamische Textfelder

HTML ist es egal, wenn Sie die Attribute eines Elements definieren, solange Sie ihnen irgendwo Werte geben. Dies bedeutet, dass Sie ein Textfeldelement dynamisch erstellen und seine Attribute jederzeit festlegen können. Die Funktion document.createElement ermöglicht dies wie folgt:

var box = document.createElement ("Eingabe");

Das ist alles, was Sie brauchen, um ein HTML-Eingabeelement zu erstellen und es einer Variablen mit dem Namen "box" zuzuweisen. Das Box-Objekt wird erst dann zu einem Textfeld, wenn Sie seinem Typattribut den Wert "text" geben, wie in diesem Beispiel gezeigt:

box.type = "text";

Webseitenintegration

Mit dem folgenden Code wird das Textfeld an das HTML-Dokument angehängt. Verwenden Sie dazu die nützliche Funktion appendChild:

document.body.appendChild (Feld);

Wenn Sie das Textfeld nach einem bestimmten Steuerelement anhängen möchten, verwenden Sie stattdessen die folgende Anweisung:

document.getElementById ("some_Element_ID"). appendChild (box);

Ersetzen Sie "some_Element_ID" durch den Namen des Elements, nach dem Sie das Textfeld anhängen möchten. Wenn dieses Element beispielsweise eine Schaltfläche mit der ID "button1" wäre, würde die appendChild-Anweisung wie folgt aussehen:

document.getElementById ("button1"). appendChild (box);

Optionale Attribute

Ihr neues Textfeld funktioniert mit diesem Code einwandfrei. Erstellen Sie einfach eine JavaScript-Funktion, die die Anweisung enthält, und rufen Sie sie auf, wann immer Sie ein Textfeld benötigen. Sie können den Wert und die ID-Attribute des Textfelds jedoch auch wie folgt festlegen:

box.value = boxValue; box.id = boxID;

Übergeben Sie die Werte von boxValue und boxID an die Funktion, und diese Attribute werden auf das Textfeld angewendet. Wenn Sie einen ID-Wert zuweisen, können Sie ihn später verwenden, um die Eigenschaften des Textfelds zu aktualisieren, wie im folgenden Beispiel gezeigt:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "rot";

Die erste Anweisung erhält einen Verweis auf das Textfeld und die letzte Anweisung ändert die Hintergrundfarbe des Textfelds in Rot.