Ajout d'un élément img à un div avec javascript

Question

Ajout d'un élément img à un div avec javascript

Demandé el 18 de Octobre, 2011: Quand la question a-t-elle été
212215 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaye d'ajouter un img à la page placehere div en utilisant JavaScript, mais je n'ai pas de chance. Quelqu'un peut-il me donner un coup de main avec mon code ?

<html>
<script type="text/javascript">
var elem = document.createElement("img");
elem.setAttribute("src", "images/hydrangeas.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild("elem");
</script>
<body>

<div id="placehere">

</div>

</body>
</html>

Demandé el 18 de Octobre, 2011 par Andrew De Forest

Answer 1

5 Réponses

Answer 2

86voto

Ghyath Serhal Points 3458

document.getElementById("placehere").appendChild(elem);

no

document.getElementById("placehere").appendChild("elem");

et utiliser les éléments ci-dessous pour définir la source

elem.src = 'images/hydrangeas.jpg';

Répondu el 18 de Octobre, 2011 par Ghyath Serhal (3458 Points )

1 votes

OK, j'ai retiré la variable des guillemets mais je ne vois toujours pas d'image.

Commenté el 18 de Octobre, 2011 par Andrew De Forest

0 votes

@AndrewDeForest : appendChild attend un objet et cela devrait fonctionner, à moins que le chemin d'accès à votre image soit erroné. Vérifiez ceci jsfiddle.net/naveen/S57rs

Commenté el 18 de Octobre, 2011 par naveen

0 votes

Hmm, je n'en ai aucune idée. Je l'ai changé en elem.src = "images/hydrangeas.jpg" et je ne le vois toujours pas. J'ai même écrit la balise <img src="images/hydrangeas.jpg"> juste pour m'assurer que le chemin était correct, et il s'est affiché.

Commenté el 18 de Octobre, 2011 par Andrew De Forest

Afficher 2 autres commentaires

Answer 3

33voto

Some Guy Points 8752

Il devrait l'être :

document.getElementById("placehere").appendChild(elem);

Et placez votre div avant votre javascript parce que si vous ne le faites pas, le javascript s'exécute avant le div existe. Ou attendre qu'il soit chargé. Donc votre code ressemble à ça :

window.onload = function() {
  var elem = document.createElement("img");
  elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
  elem.setAttribute("height", "768");
  elem.setAttribute("width", "1024");
  elem.setAttribute("alt", "Flower");
  document.getElementById("placehere").appendChild(elem);
}

<div id="placehere"></div>

Pour prouver mon point de vue, voyez ceci avec l'onload et ceci sans la surcharge . Lancez la console et vous trouverez une erreur indiquant que l'option div n'existe pas ou ne peut être trouvé appendChild méthode de null .

Répondu el 18 de Octobre, 2011 par Some Guy (8752 Points )

Answer 4

5voto

hema Points 41

function image()
{
    //dynamically add an image and set its attribute
    var img=document.createElement("img");
    img.src="p1.jpg"
    img.id="picture"
    var foo = document.getElementById("fooBar");
    foo.appendChild(img);
}

<span id="fooBar">&nbsp;</span>

Répondu el 18 de Mars, 2013 par hema (41 Points )

Answer 5

2voto

J W Points 126

La solution suivante semble être une version beaucoup plus courte pour cela :

<div id="imageDiv"></div>

En Javascript :

document.getElementById('imageDiv').innerHTML = '<img width="100" height="100" src="images/hydrangeas.jpg">';

Répondu el 26 de Décembre, 2019 par J W (126 Points )

Answer 6

1voto

PedroMiotti Points 425

Au cas où quelqu'un se demanderait comment le faire avec JQuery :

$("<img height='200' width='200' alt='testImage' src='https://avatars.githubusercontent.com/u/47340995?v=4'> </img>").appendTo("#container");

Réf : https://api.jquery.com/jQuery/#jQuery2

Répondu el 18 de Novembre, 2021 par PedroMiotti (425 Points )

Ajout d'un élément img à un div avec javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ajout d'un élément img à un div avec javascript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: