Ну что, вот еще одной мыслью задалось мое сознание и в поисках решения и собственно истины по вопросу можно ли в переменную поместить картинку, а не какое-то значение и родилась эта статья. Из всего изученного мной, ко пришло понимание того, что не смотря на то, что типы значений переменных в JS могут быть и числами и булевыми значениями и массивами и текстовыми строками и т.д., но вот картинками они быть не могут! Это весьма огорчительно, ведь так хотелось бы раз и подставить нужное значение в нужное место и у нас появилось бы еще картинка, тем более, что они так сильно могут разнообразить и дополнить контент, а значит без них никуда. Ну да ладно, дело не в этом, а в том, как же это решается.
На самом деле даже подобное и выявленное ограничение не ставит крест на формировании и создании картинки в нужном месте. Здесь как раз были выбраны правильные слова, не вставить, не скопировать из переменной, а именно создание картинки, вот что происходит по факту ее появления в JS.
Здесь в ход идет сразу несколько операторов участвующих в этом процессе.
Первый
Метод cloneNode (), который создает копию узла и возвращает клон. Также он клонирует все атрибуты и их значения.
Второй
Это использование метода appendChild () или insertBefore (), чтобы вставить клонированный узел в документ в блок, куда угодно.
Итак, как мне всегда кажется, лучше сразу обратиться к примеру и коду и он расскажет намного больше, чем порой могу это сделать я.
Пример
Здесь надо сказать о инвариантных случаях, когда есть необходимость вставлять не в какой-то конкретный блок, а скажем в тело странички. Тогда в ход пойдет оператор document.body.appendChild (s); По факту у нам получится добавление "дитя" к телу страницы. Ну то есть все логично, там внизу и появится тогда наша картинка.