Как вставить элемент после тега script из самого скрипта
Недавно столкнулся с такой задачей: требовалось в Javascript сформировать определенный HTML-код и вставить его сразу после тега script, из которого этот код вызывается. Возник вопрос: а как вообще узнать, какой скрипт сейчас выполняется?
Сделать это можно несколькими способами.
После того, как нужный элемент script найден, добавить блок можно с помощью обычного метода insertBefore. Только поскольку блок мы хотим вставить после скрипта, нужно указать, что мы вставляем его перед nextSibling нашего DOM-элемента:
Сделать это можно несколькими способами.
- воспользоваться свойством 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);