javascript html内に動的にコメントを追加する

javascript html内に動的にコメントを追加する

javascriptで、createCommentを使用して、html内に動的にコメントを追加するサンプルコードを掲載してます。ブラウザはchromeのデバックモードを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

createComment使い方

createCommentを使用すると、html内に動的にコメントを追加することが可能です。

createComment使い方

実行結果は、html内にコメントがされていることが確認できます。

macのsafari(13.1.3)でも同じ結果となります。

また、document.getElementByIdを省略して、簡潔に記述することもできます。

サンプルコード

以下は、
「コメント追加」をクリックするとコメントをhtml要素内に追加する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

コメントが追加されていることが確認できます。