Добавление элемента img в div с помощью javascript

#javascript #dom

Вопрос:

Я пытаюсь добавить img в placehere div с помощью 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>

Ответ №1:

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

не

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

и используйте приведенное ниже, чтобы установить источник

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

1. Хорошо, я взял переменную в кавычки, но я все еще не вижу изображения

2. @AndrewDeForest: appendChild ожидает объект, и тогда он должен работать, если путь к вашему изображению не указан неправильно. Проверьте это jsfiddle.net/naveen/S57rs

3. Хм, я понятия не имею. Я изменил его на elem.src = «images/hydrangeas.jpg » и я все еще этого не понимаю. Я даже выписал тег <img src=»images/hydrangeas.jpg «> просто чтобы убедиться, что путь был правильным, и он появился.

4. Вы уверены, что скрипт выполняется?

5. Я думаю, что мой скрипт был запущен до завершения загрузки DOM, поэтому я добавил document.addEventListener(«DOMContentLoaded», function() и, похоже, это исправило!

Ответ №2:

Это должно быть:

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

И поместите свой div перед своим javascript, потому что, если вы этого не сделаете, javascript будет выполняться перед div exists . Или дождитесь его загрузки. Итак, ваш код выглядит следующим образом:

 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>

Чтобы доказать мою точку зрения, посмотрите это с загрузкой, а это без загрузки. Запустите консоль, и вы обнаружите ошибку, в которой указано, что метод div не существует или не может найти appendChild null .

1. Забудьте обо всех вызовах setAttribute , просто задайте свойства напрямую: elem.src = ...; elem.height = ...; elem.alt = ...; и так далее.

2. Согласен, но, насколько я знаю, использование этого метода не имеет недостатков. Может быть, нам следует настроить тест производительности на JSPerf

3. Тест JSPerf показывает, что setAttribute на самом деле работает быстрее. Неплохо.

4. Разница в производительности незначительна, но для справки, вот тот , который идет другим путем в некоторых браузерах. Более важным является несоответствие setAttribute в разных браузерах по сравнению с согласованностью настройки свойств. В браузерах, совместимых с HTML5, оба делают одно и то же, поэтому неудивительно, что производительность в таких браузерах почти одинакова.

5. Возможно, это быстрее, если вы его не добавляете. Это то, что я вывожу из этого теста. Вы, конечно, правы насчет согласованности.

Ответ №3:

 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">amp;nbsp;</span>

Ответ №4:

Следующее решение кажется гораздо более короткой версией для этого:

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

В Javascript:

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

Ответ №5:

На случай, если кому-то интересно, как это сделать с помощью jQuery:

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

Ссылка: https://api.jquery.com/jQuery/#jQuery2