Я пытаюсь добавить img в div placehere с помощью JavaScript, но мне не повезло. Может ли кто-нибудь дать мне руку с моим кодом?
<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>
document.getElementById("placehere").appendChild(elem);
не
document.getElementById("placehere").appendChild("elem");
и используйте ниже, чтобы установить источник
elem.src = 'images/hydrangeas.jpg';
Это должно быть:
document.getElementById("placehere").appendChild(elem);
И поместите свой div перед вашим javascript, потому что, если вы этого не сделаете, javascript будет выполняться до того, как будет существовать div. Или дождитесь его загрузки. Таким образом, ваш код выглядит следующим образом:
<html>
<body>
<script type="text/javascript">
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);
}
</script>
<div id="placehere">
</div>
</body>
</html>
Чтобы доказать свою точку зрения, см. этот с onload и этот без onload. Запустите консоль, и вы найдете сообщение об ошибке, указывающее, что div не существует или не может найти метод appendChild null.
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"> </span>