Как добавить изображение в DOM с помощью JavaScript

Мне нужно было программно добавить изображение вДОМдругими словами, на HTML-страницу динамически.

Для этого я создалimgэлемент, использующийcreateElementметод объекта Document:

const image = document.createElement('img')

Затем я установилsrcатрибут изображения:

image.src  = '/picture.png'

(Вы можете использовать относительный или абсолютный URL, как и в обычном HTMLimgтег)

Затем я определил контейнер, в который хочу добавить изображение, и вызвалappendChild()метод на нем:

document.querySelector('.container').appendChild(image)

Больше руководств по браузеру:

• Некоторые полезные приемы, доступные в HTML5
• Как я заставил веб-сайт на CMS работать в автономном режиме
• Полное руководство по прогрессивным веб-приложениям
• API-интерфейс Fetch
• Руководство по Push API
• API обмена сообщениями канала
• Учебник для сервис-воркеров
• Руководство по Cache API
• Руководство по API уведомлений
• Погрузитесь в IndexedDB
• API селекторов: querySelector и querySelectorAll
• Эффективно загружайте JavaScript с помощью defer и async
• Объектная модель документа (DOM)
• API веб-хранилища: локальное хранилище и хранилище сеансов
• Узнайте, как работают HTTP-файлы cookie
• API истории
• Формат изображения WebP
• XMLHttpRequest (XHR)
• Подробное руководство по SVG
• Что такое URL-адреса данных
• Дорожная карта для изучения веб-платформы
• CORS, совместное использование ресурсов между источниками
• Веб-воркеры
• Руководство по requestAnimationFrame ()
• Что такое Doctype
• Работа с консолью DevTools и консольным API
• API синтеза речи
• Как дождаться события готовности DOM в простом JavaScript
• Как добавить класс к элементу DOM
• Как перебрать элементы DOM из querySelectorAll
• Как удалить класс из элемента DOM
• Как проверить, есть ли у элемента DOM класс
• Как изменить значение узла DOM
• Как добавить событие щелчка в список элементов DOM, возвращаемых из querySelectorAll
• WebRTC, веб-API реального времени
• Как получить позицию прокрутки элемента в JavaScript
• Как заменить элемент DOM
• Как принимать только изображения в поле входного файла
• Зачем использовать предварительную версию браузера?
• Объект Blob
• Файловый объект
• Объект FileReader
• Объект FileList
• ArrayBuffer
• ArrayBufferView
• Объект URL
• Типизированные массивы
• Объект DataView
• API BroadcastChannel
• API Streams
• Объект FormData
• Объект навигатора
• Как использовать API геолокации
• Как использовать getUserMedia ()
• Как использовать API перетаскивания
• Как работать с прокруткой на веб-страницах
• Обработка форм в JavaScript
• События клавиатуры
• События мыши
• Сенсорные события
• Как удалить всех дочерних элементов из элемента DOM
• Как создать атрибут HTML с помощью ванильного Javascript
• Как проверить, установлен ли флажок, используя JavaScript?
• Как скопировать в буфер обмена с помощью JavaScript
• Как отключить кнопку с помощью JavaScript
• Как сделать страницу редактируемой в браузере
• Как получить значения строки запроса в JavaScript с помощью URLSearchParams
• Как сразу удалить весь CSS со страницы
• Как использовать insertAdjacentHTML
• Safari, предупредить перед выходом
• Как добавить изображение в DOM с помощью JavaScript
• Как сбросить форму
• Как использовать Google Fonts