Динамическое добавление тегов к HTML в нужном месте

Question

Где-то в файле HTML есть следующее:

<script SRC="story_content/user.js" TYPE="text/javascript"></script>

Что, если мы хотим динамически (Javascript предпочтительнее JQuery принято) добавить еще один тег сценария или ссылку CSS сразу после него.

Объяснение: Нам нужно выбрать тег скрипта с помощью SRC, и нам нужно добавить теги после тега скрипта.

Вот теги, которые мы должны добавить после тег сценария

<link rel="stylesheet" href="../../../sources/main.min.css" data-noprefix />
<link rel="stylesheet" href="html5/data/css/output.min.css" data-noprefix />
<script data-main="app/scripts/init.generated" src="../../../sources/app.min.js"></script>

Answer 1

Вы можете использовать селектор запросов для достижения цели в чистом виде js, например:

var source_name = "story_content/user.js"              // path of file

var add_to = document.querySelector(`script[src=${source_name}]`);

После того, как add_to сохранится, вы сможете добавить тег, например:

var to_be_added_tag = document.CreateElement("script");
to_be_added_tag.setAttribute("src", src_path_of_your_file); // src_path_of_your_file is variable, value of src attribute

add_to.after(to_be_added_tag);   

* Примечание: - after используется для добавления элемента после некоторого узла. рефов