現在処理を実行しているscript要素を取得(currentScript)

Document オブジェクトの currentScript プロパティを参照すると現在実行している <script> 要素を取得します。 currentScript プロパティで取得した要素に対して insertAdjacentHTML メソッドを実行することで、 Document.write の代わりとして使用することもできます。ここでは Document.currentScript プロパティの使い方について解説します。

(Last modified: 2023年02月03日)

currentScriptプロパティの使い方

currentScriptプロパティの使い方

Document オブジェクトの currentScript プロパティを参照すると現在実行している <script> 要素を取得します。書式は次のとおりです。

document.currentScript

次のサンプルをみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<script>
let element = document.currentScript;
console.log(element);
</script>

</body>
</html>

この HTML ページをブラウザで表示するとコンソールには次のように出力されます。

>> <script>
>> let element = document.currentScript;
>> console.log(element);
>> </script>

このように document.currentScript プロパティを参照すると、現在実行している <script> 要素を取得することができます。

取得した <script> 要素に対して Element オブジェクトの insertAdjacentHTML メソッドと実行することで、現在実行している <script> 要素の前や後ろにノードを追加することができます。

<script>
let element = document.currentScript;
element.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
</script>

※ insertAdjacentHTML メソッドの詳しい使い方については「HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)」を参照されてください。

現在利用が推奨されていない Document.write の代わりにドキュメントに対してテキストを書き込むための方法のひとつとして Document.currentScript プロパティが利用できます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<script>
document.currentScript.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
</script>

<script>
document.currentScript.insertAdjacentHTML('beforebegin', '<p>Bye</p>');
</script>

</body>
</html>

この HTML ページをブラウザで表示すると、 HTML ページに含まれている 2 つの <script> 要素の前に p タグの要素をそれぞれ追加して表示します。

currentScriptプロパティの使い方(1)

実際に確認してみると <script> 要素の前に p タグの要素が追加されていることが確認できます。

currentScriptプロパティの使い方(2)

-- --

Document.currentScript プロパティの使い方について解説しました。

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。