HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのcreateComment()メソッドとは？使い方と実行例をわかりやすく解説

HTML DOM の createComment() メソッドは、指定したテキストを含むコメントノードを作成するためのメソッドです。引数として、作成したいコメントの内容（文字列）を受け取ります。

なお、コメントはブラウザ上には表示されないため、このメソッドを実行した後は、開発者ツールなどでHTMLドキュメントを確認しないと、作成されたコメントを見ることができません。

構文

createComment() メソッドの構文は以下の通りです。

document.createComment( text );

ここで text は文字列型で、コメントに追加したいデータを指定します。

使用例

それでは、createComment() メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、このHTMLドキュメントにコメントが作成・追加されます。</p>
<button onclick="Comment()">COMMENT</button>
<p id="Sample"></p>
<script>
    function Comment() {
        var x = document.createComment("This is a sample comment");
        document.body.appendChild(x);
        var p = document.getElementById("Sample");
        x.innerHTML = "The comment was added and can only be seen in the HTML document only";
    }
</script>
<p>開発者ツールでコードを確認すると、HTMLドキュメント内にコメントが追加されているのが分かります。</p>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのcreateComment()メソッドとは？使い方と実行例をわかりやすく解説

COMMENT ボタンをクリックし、その後開発者ツールでコードを確認すると、以下のようにコメントがHTMLドキュメント内に追加されていることが分かります。

HTML DOMのcreateComment()メソッドとは？使い方と実行例をわかりやすく解説

コードの解説

上記の例では、以下のような処理が行われています。

1. ボタンの設置

まず、クリックされると Comment() 関数を実行する COMMENT ボタンを作成しています。

<button onclick="Comment()">COMMENT</button>

2. コメントノードの作成と追加

Comment() 関数では、document オブジェクトの createComment() メソッドを使って、引数で渡されたメッセージを持つコメントノードを生成します。生成されたコメントノードは変数 x に代入されます。

続いて、document.body.appendChild() メソッドを使用して、作成したコメントノードをドキュメントの body 要素に追加しています。appendChild() メソッドの引数として、先ほど作成したコメントが渡されています。

最後に、<p> 要素の id を取得し、innerHTML プロパティにメッセージを設定することで、画面上に案内文を表示しています。

function Comment() {
    var x = document.createComment("This is a sample comment");
    document.body.appendChild(x);
    var p = document.getElementById("Sample");
    x.innerHTML = "The comment was added and can only be seen in the HTML document only";
}

まとめ

createComment() メソッドを使えば、JavaScriptから動的にHTMLコメントを挿入できます。コメントはユーザーには見えませんが、ソースコードや開発者ツール上では確認できるため、デバッグ用の注釈や一時的なマーキングなどに活用できます。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド