So fügen Sie ein Bild in HTML über JavaScript hinzu

Beim Erstellen einer Webseite oder einer Website muss ein Bild an einem bestimmten Element angehängt werden. Zum Beispiel erzeugt das Assoziieren eines Bildes mit einer Aktion Effekte. In solchen Situationen ist das Hinzufügen von Bildern in HTML über JavaScript von großer Hilfe bei der Integration mehrerer Elemente, wodurch die Website hervorgehoben wird.

In diesem Blog wird das Verfahren erörtert, um ein Bild in HTML über JavaScript hinzuzufügen.

So fügen Sie ein Bild in HTML mit JavaScript hinzu?

Die folgenden Methoden werden verwendet, um Bilder in HTML -Dokumenten mit JavaScript hinzuzufügen:

• “appendChild ()" Methode.
• “QuerySelector ()" Methode.

Methode 1: Bild im HTML -Dokument über JavaScript mit appendChild () hinzufügen

Der "appendChild ()Die Methode fügt das Element vom untergeordneten Knoten in den übergeordneten Knoten hinzu oder fügt sie an. Diese Methode kann das Bild so anzeigen, dass das angegebene Bild in JavaScript an ein Element im HTML -Code angehängt wird.

Beispiel

Überlegen wir das folgende Beispiel:

Dieses Bild wird mit JavaScript im HTML -Dokument hinzugefügt:

Im obigen Code -Snippet:

• Fügen Sie innerhalb der HTML -Datei eine hinzu “<div> ”Element mit der ID“Myimg" innerhalb der <Körper> Tag.
• Wenden Sie im nächsten Schritt die anCreateLement ()"Methode zum Erstellen eines Elementknotens namens"img”.
• Danach das "srcDas Attribut gibt den Pfad des Bildes an.
• Der "GetElementById ()"Methode wird im nächsten Schritt auf die enthaltene Zugriffe zugreifen"”Element durch seine“Ausweis”.
• Zuletzt die “appendChild ()Die Methode wird das angegebene Bild im vorherigen Schritt an das zugegriffene Element anhängen.

Ausgang

Methode 2: Bild im HTML -Dokument über JavaScript mit QuerySelector () hinzufügen ()

Der "QuerySelector ()Die Methode greift auf ein Element basierend auf dem CSS -Selektor zugänglich. Es kann auch angewendet werden, um direkt auf das HTML -Element zuzugreifen und ein Bild zu assoziieren, indem Sie es angeben.

Beispiel

Das folgende Beispiel zeigt das angegebene Konzept:

Dieses Bild wird in HTML mit JavaScript hinzugefügt:

In den obigen Codezeilen:

• Eine Überschrift und eine “einschließen“<img> ”Element, wie angegeben.
• Greifen Sie im JavaScript -Code auf das im vorherige Schritt erstellte Element zu, das im vorherigen Schritt erstellt wurde. “QuerySelector ()" Methode.
• Schließlich wenden Sie das an “src”Attribut, um ein Bild über Pfad einzuschließen.

Ausgang

Es ist ersichtlich, dass das Bild an das angehängt ist “Element in HTML über JavaScript.

Abschluss

Um ein Bild in HTML mit JavaScript hinzuzufügen, wenden Sie die “ansrc”Attribut kombiniert mit dem“appendChild ()" oder der "QuerySelector ()" Methode. Die erstere Methode wendet das Bild mit Hilfe eines erstellten Knotens an ein Element in HTML an. Die letztere Methode greift direkt auf das HTML -Element zu und assoziiert ein Bild damit. In diesem Blog wurde das Verfahren zum Hinzufügen von Bildern in HTML über JavaScript erörtert.