JavaScriptの内部HTMLについて知っておくべきことすべて



JavaScriptの内部HTMLは非常に便利な機能であり、作成されるWebページにより動的で用途の広い側面を提供するために広く使用されています。

JavaScriptは、最も広く使用されているプログラミング言語の1つです。また、プラットフォーム間での汎用性でも非常に人気があります。にはさまざまなプロパティがあります これにより、動的なWebサイトを構築する作業が簡単になります。この記事では、JavaScriptの内部HTMLについて次の順序で説明します。

JavaScriptの紹介

JavaScriptは、サーバー側のプログラミング言語としてだけでなく、クライアント側のプログラミング言語としても使用されます。 実行に使用されます アプリケーションのクライアント側とサーバー側。ノードは、いくつかの場所でNode.jsと呼ばれることもあります。





Javascript-javascriptの内部html-edureka

JavaScriptは、いくつかの機能を簡単に実行するための多数のメソッドを提供します。これがJavaScriptを最も人気のあるプログラミング言語の1つにした理由であり、さまざまな種類の製品開発で広く使用されています。



JavaScriptの内部HTML

内部 JavaScriptのプロパティは非常に便利な機能の1つであり、作成されるWebページにより動的で用途の広い側面を提供するために広く使用されています。

初心者のための春のmvcチュートリアル

innerHTMLを簡単に説明しようとすると、innerHTMLによって行われる作業は、ページ全体を更新せずにページコンテンツをロードすることです。これにより、データ使用量とページの読み込みにかかる時間が節約され、簡単に取得できます。これにより、ユーザーは非常に迅速で応答性の高い感触が得られるため、ユーザーエクスペリエンスが大幅に向上します。

少し難しいように聞こえるかもしれませんが、例を使ってこれを理解してみましょう。



例:

 

innerHTMLテキストを変更するには、ここをクリックしてください。

function myFunction(){document.getElementById( 'paragraph1')。innerHTML = '段落が変更されました!' }

上記のコードでは、段落タグでそのIDはparagraph1です。

あります 関数 myfunction()という名前で、「ここをクリックしてinnerHTMLテキストを変更する」というテキストをクリックすると取り消されます。クリック時に関数が取り消されると、getElementById(“ paragraph1”)という関数が実行されます。これは、IDを持つ要素をデモとして選択することを示しています。

さらに、innerHTML関数があります。これは、onclickの後に何をするかを単に意味します。上記の例では、単に「段落が変更されました」です。

以下は、上記のコードの初期出力です。

以下は、クリック後に変更された出力です。

順序付きリストまたは順序なしリストを含む内部HTML

以下は、順序付きリストまたは順序なしリストでのinnerHTMLの使用を示す例です。

例:

 
  • こんにちは
  • またあったね

下のボタンをクリックして、ul要素のコンテンツを取得します。

関数helloFunction(){var x = document.getElementById( 'myList')。innerHTML document.getElementById( 'paragraph1')。innerHTML = x}を試してください

ここで、innerHTMLは、「Tryit」という名前で定義されたボタンによってトリガーされます。

上記のテキストの最初の出力は次のとおりです。

SQLの<>演算子

ボタンをクリックした後の出力。ボタンをクリックしてもページが再読み込みされることはありませんが、innerHTMLを使用したことが原因でした。

URLを変更するためのInnerHTML

以下は、ボタンクリックでURLを変更するためのinnerHTMLの使用を示す別の例です。

例:

  ウィキペディア リンク関数の変更myFunction(){document.getElementById( 'myAnchor')。innerHTML = 'Google' document.getElementById( 'myAnchor')。href = 'https://www.google.com' document.getElementById( 'myAnchor' ).target = '_ blank'}

上記の例では、最初はウィキペディアのWebサイトへのリンクが示されていますが、ボタンをクリックすると、リンクがGoogleに変わります。

ページをリロードせず、一部のみを更新する場合に、innerHTMLが便利な操作がいくつかあります。これにより、時間を節約できるだけでなく、アプローチのための労力も少なくて済みます。innerHTMLの最大の利点は、この機能で強化されたユーザーエクスペリエンスです。

チェックしてください Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service(S3)にデプロイする方法を学ぶのに役立ちます。

質問がありますか? 「JavaScriptでの文字列連結」のコメントセクションにその旨を記載してください。折り返しご連絡いたします。