このチュートリアルでは、JavaScript を使用して HTML コードを動的に記述する方法について説明します。
JavaScript を使用して HTML コードを動的に記述する方法は?
JavaScript を使用して HTML コードを記述するには、次のメソッドを使用します。
方法 1: document.createElement() メソッドを使用して HTML コードを動的に記述する
JavaScript の「 document.createElement() ” を使用したメソッド テキストコンテンツ ” プロパティを使用して、JavaScript で動的に HTML コードを記述します。 createElement() メソッドを使用すると、特定の HTML 要素を作成でき、textContent プロパティを使用してテキスト コンテンツを設定します。
構文
指定された構文を使用して、JavaScript で HTML 要素を作成します。
資料。 createElement ( 'タグ名' )
例
ここでは、最初に、「 createElement() ' 方法：
定数 文章 = 資料。 createElement ( 'p' ) ;段落内のテキストを設定するには、textContent プロパティを使用します。
文章。 テキストコンテンツ = 「Linuxhint へようこそ」 ;
最後に、「 ドキュメント.書き込み() ' 方法：
資料。 書きます ( 文章。 テキストコンテンツ ) ;ここで、JavaScript を使用して Web ページにテキストを正常に書き込んだ出力を確認できます。
方法 2: innerHTML プロパティを使用して動的に HTML コードを記述する
HTML コードを動的に記述するには、JavaScript の「 インナーHTML ' 財産。 HTML 要素のコンテンツを変更する最も簡単な方法です。すべてのブラウザをサポートしています。
構文
指定された構文に従って、innerHTML プロパティを使用します。
インナーHTML = '文章'例
HTML ファイルで、まず、定義した関数を呼び出すボタンを作成します。 見出し（） クリック イベントでの JavaScript の ”:
< ボタンオンクリック = '見出し（）' > ここをクリック ボタン >JavaScript からテキストが表示される
タグを使用して段落を作成し、それに ID を割り当てます。
< ピッド ID = '見出し' > p >関数を定義する」 見出し（） 」を JavaScript ファイルに記述します。 「 getElementById() 」メソッドを適用し、「 インナーHTML 」 プロパティ:
関数見出し ( ) {資料。 getElementById ( '見出し' ) . インナーHTML = '
Linuxhint へようこそ
' ;}
出力
JavaScript を使用して HTML コードを動的に記述することに関連する重要な情報をすべてまとめました。
結論
JavaScript で HTML コードを動的に記述するには、「 document.createElement() ” を使用したメソッド テキストコンテンツ 」プロパティまたは「 インナーHTML ' 財産。最初のメソッドでは、HTML コードは必要ありませんが、innerHTML プロパティでは、HTML 要素にアクセスして操作を実行する必要があります。このチュートリアルでは、JavaScript を使用して動的に HTML コードを記述する方法について説明しました。