JavaScript 外部ファイルを動的に追加存在の有無

動的に外部ファイルを追加するのですが、

追加したものがもし既に追加されていた場合、
追加しない処理を書きたいのですが、
どうしたらいいでしょうか
該当のコードですと押す度にHTTP Requestが発生し、無限に追加できます
1度追加したものが追加されてるかどうかを判別したいです

removeChild&後の再度appendChildは無し
変数によるチェックは無しでお願いいたします

でお願いします

<script>
function add(){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = "add.js";
    head.appendChild(script);
}
</script>
<input type="button" value="動的追加" onclick="add()">

add.js

alert("add");

変数によるチェック

<script>
var f=0;
function add(){
if(f==0){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = "add.js";
    head.appendChild(script);
}
}
</script>
<input type="button" value="動的追加" onclick="add()">

add.js

alert("add");
f=1;

行動規範の内容に同意します

回答2件

ベストアンサー

「特定のsrcが書かれた<script>要素」は、簡単に存在の有無をチェックできます。

javascript
1function add(){
2    if(document.querySelector('script[src="add.js"]')) return;
3    var head = document.getElementsByTagName('head')[0];
4    var script = document.createElement('script');
5    script.src = "add.js";
6    head.appendChild(script);
7}