Fügen Sie HTML an Containerelement ohne inneres HTML an
Manchmal muss der Entwickler für verschiedene Zwecke verschiedene Elemente zum Behälter hinzufügen. Darüber hinaus möchten sie möglicherweise die Containerelemente anhängen, die hauptsächlich zum Hinzufügen von Daten in einer Datei verwendet werden. In einer solchen Situation können Sie den Daten in einem Programm mit JavaScript Zeichen in einem Programm hinzufügen.
Dieser Beitrag erklärt, dass er ein Element an ein Containerelement ohne inneres HTML angehängt hat.
Fügen Sie HTML an Containerelement ohne inneres HTML an
Um das HTML -Containerelement ohne inneres HTML anzuhängen, das “dokumentieren.GetElementById ()" Und "InsertAdjacentHtml ()”JavaScript -Methoden werden verwendet.
Befolgen Sie das angegebene Verfahren für die praktische Demonstration.
Schritt 1: Erstellen Sie einen Div -Container
Erstellen Sie zunächst einen „DIV“ -Container, indem Sie das „verwenden“Element und fügen Sie ein Klassenattribut in das DIV -Eröffnungs -Tag ein.
Schritt 2: Machen Sie eine Schaltfläche
Verwenden Sie dann das “”Tag, um eine Schaltfläche zu erstellen und das folgende Attribut in innerhalb von: hinzuzufügen:
- Der "TypGibt den Typ des Elements an. Zu diesem Zweck wird der Wert dieses Attributs als "festgelegt" festgelegt "einreichen”.
- “ONCLICKMit Handler kann der Benutzer eine Funktion aufrufen und eine Aktion ausführen, wenn ein Element/eine Schaltfläche klickt. Der Wert von "Onclick" ist als "festgelegt"AddElement ()”.
- Der "AddElement ()Die Funktion wird verwendet, um am Ende des Vektors ein bestimmtes Kind/ein bestimmtes Element anzuhängen, indem die Länge des Vektors verbessert wird.
- Als nächstes einbetten Sie Text zwischen den “ein”Tag zum Anzeigen auf der Schaltfläche.
Schritt 3: Machen Sie ein weiteres Div und fügen Sie Daten hinzu
Dann verwenden Sie die “”Tag, um ein anderes Div zu erstellen und ein ID -Attribut anzugeben, um dem Div -Element eine bestimmte ID zuzuweisen. Fügen Sie das Absatz -Tag hinzu und definieren Sie die Daten:
Element 1
Element 2
Ausgang
Schritt 4: Stil „Div“ -Stil -Behälter
Greifen Sie nun mit Hilfe des Klassennamens auf den Haupt -Div -Container zu “.HauptinhaltUnd wenden Sie die im folgenden Snippet genannten CSS -Eigenschaften an:
.Hauptinhalt
Text-Align: Mitte;
Rand: 30px 70px;
Grenze: 4px fest blau;
Polsterung: 50px;
Hintergrund: RGB (247, 212, 205);
Hier:
- “TextausrichtungDie Eigenschaft wird verwendet, um die Ausrichtung des Textes festzulegen.
- “Rand”Zuweist einen Raum außerhalb der definierten Grenze.
- “GrenzeGibt eine Grenze um das definierte Element an.
- “PolsterungFügen Sie leerer Speicherplatz in das Element in einer Grenze hinzu.
- “HintergrundDie Eigenschaft legt eine Farbe auf der Rückseite des Elements fest.
Ausgang
Schritt 6: Style -Taste -Element
Greifen Sie mit ihrem Namen auf die Schaltfläche zu und wenden Sie die folgenden CSS -Eigenschaften an:
Taste
Hintergrund: RGBA (84, 155, 214, 0.1);
Grenze: 3px fester RGB (5, 75, 224);
Border-Radius: 6PX;
Farbe: RGB (6, 63, 250);
Übergang: Alle .5s;
Zeilenhöhe: 50px;
Cursor: Zeiger;
Umriss: Keine;
Schriftgröße: 40px;
Polsterung: 0 20px;
Nach dem obigen Code -Snippet:
- Anwenden "Grenze" Und "HintergrundFarben im Schaltflächenelement, indem die spezifischen Werte zugewiesen werden.
- “GrenzradiusDie Eigenschaft wird verwendet, um die Kurven der Taste in einer runden Form festzulegen.
- “FarbeEigenschaft definiert eine Farbe für den hinzugefügten Text im Element.
- “Übergang”Bietet eine Methode zur Steuerung der Animationsgeschwindigkeit beim Ändern der CSS -Eigenschaften
- “ZeilenhöheDie Eigenschaft legt die Höhe einer Linienbox fest. Es wird verwendet, um die Entfernung innerhalb von Textzeilen festzulegen.
- “Mauszeiger”Wird verwendet, um den Mauszeiger zum Anzeigen zuzuweisen, wenn ein Zeiger über ein Element ist.
- “Umriss”Wird zum Hinzufügen/Zeichnen einer Linie um Elemente verwendet, um das Element hervorzuheben.
- “Schriftgröße”Gibt die bestimmte Größe für den Text in einem Element an.
Ausgang
Schritt 7: Bewerben Sie ": schweben" auf die Schaltfläche
Greifen Sie zusammen mit dem „auf das Tastenelement zu“ zu ":schwebenPseudoklasse, die zur Auswahl von Elementen verwendet wird, wenn Benutzer über sie steuern:
Taste: Hover
Farbe: RGBA (255, 255, 255, 1);
Hintergrund: RGB (16, 17, 68);
Dann setzen Sie die “Farbe" Und "Hintergrund”Der Taste durch Anwenden dieser Eigenschaften.
Schritt 8: Stilabsatzelement
Greifen Sie auf den Absatz zu, indem Sie das verwenden “P”:
P
Schriftgröße: 20px;
Schriftdicke: fett;
Hier wenden Sie die “an“Schriftgröße" Und "Schriftgewicht" Eigenschaften.
Ausgang
Schritt 9: HTML an das Containerelement anhängen
Um das HTML an das Containerelement anzuhängen, fügen Sie das "hinzu"Tag und befolgen Sie dann die angegebenen Anweisungen:
- Initialisieren Sie eine Variable als “ElementNumber”Und weisen Sie diese Variable als" als "zu" zu "3”.
- Greifen Sie mit dem Namen auf die Funktion zu “AddElement ()Das wird verwendet, um ein bestimmtes Element am Ende des Vektors anzuhängen, indem die Länge/Größe des Vektors verbessert wird.
- Dann initialisieren Sie die Variable “Elternteil”
- Der Wert "GetElementById ()”Behandeln Sie nur einen einzelnen Namen gleichzeitig und gibt einen Knoten anstelle eines vollständigen Arrays von Knoten zurück
- Fügen Sie für ein neues Element eine Variable ein und weisen Sie den Wert als Element in das “zu”Tag zusammen mit der Elementnummer.
- Der "InsertAdjacentHtml ()Die Methode wird zum Hinzufügen von HTML -Code in einer bestimmten Position verwendet.
- Zuletzt, "ElementNumber++”Wird verwendet, um das Element im Behälter zu erhöhen.
Es kann beobachtet werden, dass das Element gemäß dem Klick an das Containerelement angehängt wurde:
Sie haben über die einfachste Methode gelernt, um das HTML ohne das innere HTML an das Containerelement anzuhängen.
Abschluss
Um das HTML ohne inneres HTML an das Containerelement anzuhängen, kann der Benutzer die JavaScript -Funktion verwenden. Initialisieren Sie zunächst eine Variable als “ElementNumber"Und Wert"dokumentieren.GetElementById ()”Unterstützt nur einen Namen gleichzeitig und gibt nur einen einzelnen Knoten zurück, nicht ein Array von Knoten. Dann, "InsertAdjacentHtml ()Die Methode fügt den HTML -Code in eine bestimmte Position ein. In diesem Beitrag geht es darum, das HTML ohne das innere HTML an das Containerelement anzuhängen.