How to useInnerHTML in Javascript

The DOM innerHTML property is used to set or return the HTML content of an element.

Syntax:

It returns the innerHTML Property.

Object.innerHTML

Example: In this example, we are using InnerHTML.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>Display Image</title>
</head>
 
<body>
 
    <!-- Create a container element
        where the image will be displayed -->
    <div id="imageContainer"></div>
 
    <script>
        // You can dynamically set the innerHTML
        // of a container to include an image element
        const imageContainer = document
        .getElementById("imageContainer");
        imageContainer.innerHTML =
          `<img src=
"https://media.w3wiki.org/wp-content/uploads/20231228172727/gfg-image.jpg">`;
    </script>
 
</body>
 
</html>


Output:



How to Display Images in JavaScript ?

To display images in JavaScript, we have different approaches. In this article, we are going to learn how to display images in JavaScript.

Below are the approaches to display images in JavaScript:

Table of Content

  • Using CreateElement
  • Using InnerHTML

Similar Reads

Approach 1: Using CreateElement

In an HTML document, the document.createElement() is a method used to create the HTML element. The element specified using elementName is created or an unknown HTML element is created if the specified elementName is not recognized....

Approach 2: Using InnerHTML

...

Contact Us