htmlファイルでurlの内容によって条件分岐


大変お世話になっております。以下の様なhtmlファイルがあり、下部にある記述でurlから取得したp_idの値の内容（例：1、か2）によって、その上にあるinclud1.js、かinclud2.jsを条件分岐させたいのですが、具体的にどのような記述にすればよろしいかお教え願いませんでしょうか。

[code]

    <!doctype html>
    <html>
    <body>
    
    <script type="text/javascript" src="includ1.js"></script>
    
    <script type="text/javascript" src="includ2.js"></script>
    
    
    <script type="text/javascript"> 
    const url = new URL(location.href);
    const p_id = url.searchParams.get("p_id");
    </script>
    
    <script type="text/javascript"> 
      document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('p_id ').value = p_id;   
    });
    </script>
    
    
    </body>
    </html>
    
[/code]

＊ご教授により試した記述

[code]

    <!doctype html>
    <html>
    <body>
    
    <script type="text/javascript"> 
    const url = new URL(location.href);
    const p_id = url.searchParams.get("p_id");
    
    const script = document.createElement('script');
    if (p_id == 1) {
      script.src = 'includ1.js';
    } else {
      script.src = 'includ2.js';
    }
    document.body.appendChild(script);
    </script>
    
    <script type="text/javascript"> 
      document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('p_id ').value = p_id;   
    });
    </script>
    
    </body>
    </html>
    
[/code]




動的に`script`要素を挿入すれば可能です。

[code]

    <!DOCTYPE html>
    <html>
    <body>
    
    <script type="text/javascript"> 
    const url = new URL(location.href);
    const p_id = url.searchParams.get("p_id");
    
    const script = document.createElement('script');
    if (p_idに関する条件) {
      script.src = 'includ1.js';
    } else {
      script.src = 'includ2.js';
    }
    document.body.appendChild(script);
    </script>
    
    </body>
    </html>
    
[/code]

挿入したスクリプトが非同期に実行されますが、それが困る場合は`script`要素の`load`イベントを待って対処します。

