Jak dodać obraz w HTML przez JavaScript

Podczas tworzenia strony internetowej lub witryny może istnieć wymóg dołączenia obrazu do określonego elementu. Na przykład powiązanie obrazu z akcją tworzy efekty. W takich sytuacjach dodanie obrazów w HTML za pośrednictwem JavaScript jest bardzo pomocne w integracji wielu elementów, tym samym wyróżniając.

Ten blog omówi procedurę dodania obrazu w HTML za pośrednictwem JavaScript.

Jak dodać obraz w HTML za pomocą JavaScript?

Do dodawania obrazów w dokumentach HTML stosuje się następujące metody za pomocą JavaScript:

• "appendChild ()" metoda.
• "QuerySelelect ()" metoda.

Metoda 1: Dodaj obraz w dokumencie HTML za pośrednictwem JavaScript za pomocą appendChild ()

„„appendChild ()”Metoda dodaje lub dołącza element z węzła dziecięcego do węzła nadrzędnego. Ta metoda może wyświetlać obraz w taki sposób, aby określony obraz w JavaScript jest dołączany do elementu w kodzie HTML.

Przykład

Przeglądmy następujący przykład:

Ten obraz jest dodawany za pomocą JavaScript w dokumencie HTML:

W powyższym fragmencie kodu:

• W pliku HTML dodaj „<div> ”Element o identyfikatorze„myimg„W obrębie <ciało> Tag.
• W następnym kroku zastosuj „createElement ()„Metoda utworzenia węzła elementu o nazwie„img".
• Potem „„src„Atrybut określi ścieżkę obrazu.
• „„getElementById ()„Metoda, w następnym kroku, dostęp do dołączonych„”Element po„ID".
• Wreszcie „„appendChild ()„Metoda dołączy określony obraz do dostępnego elementu w poprzednim kroku.

Wyjście

Metoda 2: Dodaj obraz w dokumencie HTML za pośrednictwem JavaScript za pomocą QuerySelelect ()

„„QuerySelelect ()”Metoda uzyskuje dostęp do elementu opartego na selektorze CSS. Można go również zastosować, aby uzyskać bezpośredni dostęp do elementu HTML i powiązać obraz, określając go.

Przykład

Poniższy przykład ilustruje podaną koncepcję:

Ten obraz jest dodawany w HTML za pomocą JavaScript:

W powyższych wierszach kodu:

• Obejmują nagłówek i „<img> ”Element, jak wspomniano.
• W kodzie JavaScript uzyskaj dostęp do dołączony element utworzony w poprzednim kroku za pośrednictwem „QuerySelelect ()" metoda.
• Na koniec zastosuj „src”Atrybut zawierający obraz ścieżką.

Wyjście

Można zauważyć, że obraz jest dołączony do „”Element w HTML przez JavaScript.

Wniosek

Aby dodać obraz w HTML za pomocą JavaScript, zastosuj „src”Atrybut w połączeniu z„appendChild ()" albo "QuerySelelect ()" metoda. Pierwsza metoda dołącza obraz do elementu w HTML za pomocą utworzonego węzła. Ta ostatnia metoda uzyskuje dostęp do elementu HTML bezpośrednio i kojarzy z nim obraz. W tym blogu omówiono procedurę dodawania zdjęć w HTML za pośrednictwem JavaScript.