Comment ajouter une image dans une page html en utilisant javascript ?

Active 10 juin 2019 / Viewed 27268 / Comments 0 / Edit

Exemple de comment ajouter une image dans une page html en utilisant javascript

Summary

Ajouter une image avec javascript
Changer le style de l'élément div
Changer le style de l'image
Références

Ajouter une image avec javascript

On peut tout d'abord créer une variable image avec createElement("img"):

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

puis indiquer le nom de l'image (Note: si l'image n'est pas dans le même répertoire que le document html, on peut aussi specifier le chemin complet vers l'image par exemple './path_to_img/matplotlib-grid-02.png'):

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

et enfin afficher l'image dans la page html

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

Exemple de code en utilisant cette 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>

donne

Comment ajouter une image dans une page html en utilisant javascript ?

Changer le style de l'élément div

On peut ensuite par exemple modifier le style de la dic contenant l'image avec

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>

donne

Changer le style de l'image

On peut aussi modifier le style de l'image avec

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

Exemple de 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>

donne

Références

Liens	Site
How do you insert an image in Javascript?	quora
Element.setAttribute()	developer.mozilla.org
How TO - Add a Class	stackoverflow
Add Style on image object using JavaScript in Canvas	stackoverflow
How to add styling (CSS) to img tags in Javascript/Jquery	stackoverflow
How to set style of image with html5?	stackoverflow