Динамическое создание элемента скрипт с помощью JavaScript

Что такое динамическое создание элемента скрипт с помощью JavaScript

Существует множество причин, по которым вам может понадобиться динамическое создание элемента скрипт в HTML разметке сайта. Это можно сделать с помощью PHP или JavaScript. Мы рассмотрим динамическое создание элемента скрипт с помощью JavaScript  <script>  и вставить в разметку страницы вашего сайта со стороны клиента.

Применим для этого метод document.createElement().

С помощью этого метода можно создать новый элемент и добавить атрибут src к ссылке на файл который мы хотим загрузить.

Наконец мы можем вставить созданный элемент в HTML-страницу с помощью document.head или document.body.

Например вам надо создать скрипт и добавить его внутри тега head на HTML-странице. Код будет выглядеть примерно так:

const script = document.createElement('script');  
script.src = 'https://example.com/script.js';  
document.head.appendChild(script);

В строке script.src вставьте название вашего файла и путь к нему.

Созданный скрипт будет добавлен перед закрывающим тегом head и выглядеть он будет так:

 <script src="https://example.com/script.js"></script>

Как оказалось — это очень просто.

Асинхронная загрузка для созданного скрипта.

Атрибут async позволяет загружать скрипт асинхронно, не блокируя выполнение основной страницы. Как например этого требует Google PageSpeed Insights. Для этого необходимо добавить в код правило для создания атрибута async.
В итоге код будет выглядеть так:

const script = document.createElement('script');  
script.src = 'https://example.com/script.js';  
script.async = true;  
document.head.appendChild(script);

Подобный подход полезен для загрузки дополнительных библиотек или выполнения кода на основании пользовательских действий. Это повышает производительность и адаптивность приложения, минимизируя начальное время загрузки.

Естественно, вам захочется использовать какое-то обнаружение загрузки документа, чтобы убедиться, что документ действительно загружен, прежде чем инициировать динамическую инъекцию.

Вы также можете задать innerHTML для созданного элемента <script> вместо использования src на внешний файл. Это позволяет динамически вставлять элементарный код JavaScript внутри тега  head вашей страницы.

const script = document.createElement('script');
script.innerHTML = "console.log('test')";
document.head.appendChild(script);

Это создаст элемент внутри тега заголовка вашей страницы head и который будет запущен немедленно.
Выглядеть он будет так:

<script>
  console.log('test');
</script>

И в коде HTML страницы так:

И в консоли панели разработчика (F12) так:

Создание элемента скрипт  поможет также в решении вопроса отложенной загрузки скриптов Google Аналитики, которые как известно очень влияют на показатели загрузки страницы в Google PageSpeed Insights.

Как решить этот вопрос, ну во всяком случае я его решил на своём сайте,  опишу в соответствующей статье.

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