Cómo agregar imagen en HTML a través de JavaScript

Al crear una página web o sitio, puede haber un requisito para agregar una imagen a un elemento particular. Por ejemplo, asociar una imagen con una acción crea efectos. En tales situaciones, agregar imágenes en HTML a través de JavaScript es de gran ayuda para integrar múltiples elementos, haciendo que el sitio se destaque.

Este blog discutirá el procedimiento para agregar una imagen en HTML a través de JavaScript.

Cómo agregar una imagen en HTML usando JavaScript?

Los siguientes métodos se utilizan para agregar imágenes en documentos HTML usando JavaScript:

• "añadir Niño()" método.
• "QuerySelector ()" método.

Método 1: Agregue la imagen en el documento HTML a través de JavaScript usando AppendChild ()

El "añadir Niño()El método "agrega o agrega el elemento desde el nodo secundario al nodo principal. Este método puede mostrar la imagen de tal manera que la imagen especificada en JavaScript se agrega a un elemento en el código HTML.

Ejemplo

Vamos a ver el siguiente ejemplo:

Esta imagen se agrega utilizando JavaScript en el documento HTML:

En el fragmento de código anterior:

• Dentro del archivo HTML, agregue un "<div> "Elemento que tiene la identificación"myimg" dentro de <cuerpo> Etiqueta.
• En el siguiente paso, aplique el "createElement ()"Método para crear un nodo de elemento llamado"img".
• Después de eso, el "SRC"El atributo especificará la ruta de la imagen.
• El "getElementById ()"El método, en el siguiente paso, accederá al incluido""Elemento por su"identificación".
• Por último, el "añadir Niño()El método "agregará la imagen especificada al elemento accedido en el paso anterior.

Producción

Método 2: Agregar imagen en el documento HTML a través de JavaScript usando QuerySelector ()

El "QuerySelector ()El método "accede a un elemento basado en el selector CSS. También se puede aplicar para acceder al elemento HTML directamente y asociar una imagen especificándola.

Ejemplo

El ejemplo a continuación ilustra el concepto declarado:

Esta imagen se agrega en HTML usando JavaScript:

En las líneas de código anteriores:

• Incluir un encabezado y un "<img> "Elemento, como se indicó.
• En el código JavaScript, acceda al elemento incluido creado en el paso anterior a través del "QuerySelector ()" método.
• Finalmente, aplique el "SRCAtributo para incluir una imagen a través de la ruta.

Producción

Se puede ver que la imagen se adjunta al ""Elemento en HTML a través de JavaScript.

Conclusión

Para agregar una imagen en HTML usando JavaScript, aplique el "SRC"Atributo combinado con el"añadir Niño()" o el "QuerySelector ()" método. El método anterior agrega la imagen a un elemento en HTML con la ayuda de un nodo creado. El último método accede directamente al elemento HTML y asocia una imagen con él. Este blog discutió el procedimiento para agregar imágenes en HTML a través de JavaScript.