javascript htmlタグをhtml上で表示する

javascript htmlタグをhtml上で表示する

javascriptで、htmlタグをhtml上で表示するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

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

htmlタグ表示

htmlタグを文字として表示するには、一度、タグを特殊文字に変換する必要があります。

簡単な使い方として、以下のhtml上のdivタグ内にある、p要素を取得して表示してみます。

まずは、要素を取得して、replaceメソッドでタグを特殊文字に変換して、
「innerHTML」で表示することでhtmlをそのまま表示することが可能です。

実行結果

サンプルコード

以下は、
「実行」ボタンをクリックすると、指定したhtmlを取得した後に、htmlをそのまま出力する
サンプルコードとなります。

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

htmlが、そのまま出力されていることが確認できます。

表示する箇所を「innerHTML」から、基本的に文字列で返す「textContent」に変更するとタグではなく特殊文字のまま出力することが可能です。

実行結果を確認すると、特殊文字のまま表示されていることがわかります。

「innerText」を使用した場合も、実行結果は「textContent」と同じ結果となります。

「insertAdjacentHTML」の場合は、「innerHTML」と同じようにhtmlとして表示されます。

aタグを取得

aタグを取得した場合は、実行するとリンク先に飛んでいきます。

実行結果をみると、実行ボタンをクリックするとhref属性に指定されているURLに移動することが確認できます。