Как вставить элемент после тега script из самого скрипта

Недавно столкнулся с такой задачей: требовалось в Javascript сформировать определенный HTML-код и вставить его сразу после тега script, из которого этот код вызывается. Возник вопрос: а как вообще узнать, какой скрипт сейчас выполняется?
Сделать это можно несколькими способами.
  • воспользоваться свойством document.currentScript, которое содержит ссылку на тег. Но оно не работает в старых броузерах, в частности во всех версиях MSIE (но работает в Edge). Кроме того, не следует обращаться к этому свойству из callbacks, это может приводить к некорректным результатам.
  • прописать id для тега и обращаться по нему: document.getElementById('идентификатор'). Это самый универсальный вариант, но с ним могут быть сложности, если скрипт подключается через механизмы, предусмотренные в CMS (там обычно не предусмотрено возможности указать id или иные атрибуты)
  • если точно известен URL скрипта и он не будет менятся, то можно воспользоваться document.querySelector('script[src="путь"]'). Полезно для различных встраиваемых сервисов (типа онлайн-помощников), которые берут скрипт с одного и того же URL.
  • наконец, самый надежный в плане обратной совместимости вариант — смотреть последний тег script:

    var s =  document.getElementsByTagName("script"); var attr = s[s.length-1].getAttribute("attr1");
    Однако работает он только в том случае, если скрипт подключается без async или defer.

После того, как нужный элемент script найден, добавить блок можно с помощью обычного метода insertBefore. Только поскольку блок мы хотим вставить после скрипта, нужно указать, что мы вставляем его перед nextSibling нашего DOM-элемента:
var my_scipt = document.currentScript; var elm = document.createElement('div'); elm.innerHTML='А этот блок мы вставили из внешнего скрипта!'; my_script.parentNode.insertBefore(elm,my_script.nextSibling);