How to add an image in a HTML page using javascript ?

Active February 19, 2021    /    Viewed 16514    /    Comments 0    /    Edit


Examples of how to add an image in a HTML page using javascript:

Add an image using javascript

Let's create a variable image with createElement ("img"):

var img = document.createElement("img");

then indicate the name of the image (Note: if the image is not in the same directory as the html document, we can also specify the full path to the image for example './path_to_img/matplotlib-grid- 02.png '):

img.src = "matplotlib-grid-02.png";

and finally display the image in the html page

var block = document.getElementById("x");
block.appendChild(img);

Sample code using this image

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";

    var div = document.getElementById("x");
    div.appendChild(img);
    //block.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

returns

How to add an image in a HTML page using javascript ?

Change the style of the div element

You can then for example modify the style of the div containing the image with

div.setAttribute("style", "  ");

Code

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";

    var div = document.getElementById("x");
    div.appendChild(img);
    div.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

returns

How to add an image in a HTML page using javascript ?

Update the style of the image

You can also change the style of the image with

img.setAttribute("style", " ");

Example of code

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Test Javascript</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

    <div id="x"></div>

    <script>

    var img = document.createElement("img");
    img.src = "matplotlib-grid-02.png";
    img.setAttribute("style", "margin-top: 80px;");

    var div = document.getElementById("x");
    div.appendChild(img);
    div.setAttribute("style", "text-align:center");

    </script>

</body>
</html>

returns

How to add an image in a HTML page using javascript ?

References


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!



Did you find this content useful ?, If so, please consider donating a tip to the author(s). MoonBooks.org is visited by millions of people each year and it will help us to maintain our servers and create new contents.

Amount