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


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

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 ?
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

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

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

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

Références

Image

of