jQuery html（）メソッドの使用方法

jQueryには、開発者が動的なWebエクスペリエンスを効率的に作成するのに役立つ多くのメソッドがあります。 jQuery html() メソッドは、選択した要素内のすべてのHTMLを置き換えます。これは、ページを操作した後にユーザーに表示される内容を動的に変更する場合に役立ちます。

このガイドでは、html()の使用方法について学習します。とその構文。また、html()を使用するための段階的なアプローチについても見ていきます。。 jQuery html() はjQueryライブラリの基本的なメソッドであり、よく使用されます。基本を学んだら、html()を使用して練習を開始する準備が整います。。

jQuery html（）とは何ですか？

jQuery html() 一致した要素のセット内の各要素のHTMLコンテンツを設定します。必要なHTMLのみを置き換えるのに十分な特定のクエリを提供するように注意する必要があります。

html()で変更されるのはコンテンツのみ。スタイルシートがある場合、新しいコンテンツは前のコンテンツと同じスタイルになります。 html()も言及する価値があります HTMLドキュメントでのみ機能します—XMLでは機能しません。

html（）jQuery構文

jQueryメソッドが最初にセレクターで呼び出されることを思い出してください。セレクターは、

タグのように幅が広い場合もあれば、IDを持つ

のように具体的である場合もあります（

）。目的の要素を選択したら、html()を呼び出すことができます HTML文字列をパラメータとしてhtml()に渡します。 CSSセレクターの詳細については、ガイドを参照してください。

html() パラメータとして文字列リテラルまたは文字列を含む変数のいずれかを受け入れます。「新しいコンテンツ」の文字列リテラルを渡すと、「新しいコンテンツ」を参照する変数を渡すのと同じになります。

この単純な

があるとします。

<div class='main-content>
  <p class='paragraphOne'> Hello World </p>
</div>

タグ全体を置き換えることができます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

$('div.main-content').html('<p>New Content</p>')

上記のコードは、新しいHTMLを次のようにレンダリングします。

<div class='main-content>
  <p>New Content </p>
</div>

元の

タグに関連付けられたスタイルがあった場合、新しいコンテンツではアクティブではなくなります。単純な文字列を渡すこともできます。

$('div.main-content').html('New Content')

HTMLは次のようになります。

<div class='main-content>
  New Content 
</div>

新しいコンテンツにはいくつかの違いがあることがわかります。文字列リテラルを渡すことは、以前のコンテンツのスタイルを維持するための優れた方法です。文字列リテラルは、文字を含む単なる文字列であることを忘れないでください。新しいコンテンツを子要素にする必要がある場合は、HTML文字列を使用することでこれを実現できます。

基本的な構文について説明したので、例を見てみましょう。

html（）jQueryの例

html()がどのように上記の「新しいコンテンツ」の例で選択した要素内のコンテンツを置き換えます。これは、文字列リテラルまたはHTML文字列をパラメータとして渡すことで実現できます。元のスタイルを維持する例を見てみましょう。

<head>
<style>
.blue {
 color: blue;
}

</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
 <p class='blue'>
 Hello
 </p>
 <p>
 World
 </p>
 <p>
 Goodbye
 </p>
 </div>
 <script>
 
 </script>
</body>

最初のHTMLページを見ると、「Hello」という単語だけが青色でスタイル設定されていることがわかります。

この例では、「Hello」という単語を新しいコンテンツに置き換えますが、元のスタイルは保持します。これを実現するために、クラス名が青の段落を選択します。

 $('p.blue').html("Hello AGAIN")

クラスblueに属する段落を選択し、「Hello」を「HelloAGAIN」に置き換えました。 html()以降要素名でラップされたコンテンツを置き換えます。青色は残ります。

すべての段落テキストを置き換えたい場合はどうなりますか？

要素を選択すると、上記のテキストが「HelloAGAIN」の3つのインスタンスに置き換えられます。

 $('p').html("Hello AGAIN")

ここでは、HTMLファイル内のすべての段落タグを選択し、各段落のコンテンツを「HelloAGAIN」に置き換えています。最初の例のように、これらのタグでラップされたコンテンツを置き換えるため、元のスタイルがレンダリングされます。

思った通り。セレクターの1つ上のレベルで、「メイン」クラスに属する

に移動しましょう。ここで、HTML文字列をパラメーターとして渡すと便利です。

 $('div.main').html('<p class=blue>Main Div Content</p>')

メインのdiv内には、3つの段落要素があります。 html()の方法を知る上記のコードは、3つの

タグをパラメーターとして渡されたタグに置き換えると推測できます。 HTMLの学習に関するガイドを読んで、上記の概念をさらに深く理解してください

1行のコードで、3つの異なる段落要素を置き換え、元のクラススタイルを使用しました。

結論

jQuery html() は、動的なエクスペリエンスを作成するためにHTMLページのコンテンツを置き換えるために一般的に使用される方法です。 html() HTML要素内にラップされているコンテンツを置き換えます。jQueryセレクターとスタイルクラスに注意を払うことが重要です。これにより、不要なスタイルの変更を防ぐことができます。

jQueryとは何か、その構文、およびその使用方法の例を学びました。この広く使用されている方法の練習と習得に時間を費やしてください。

jQueryeach（）のしくみ

JavaScript配列に含まれるもの：ステップバイステップガイド

HTMLフォームで送信ボタンを使用するにはどうすればよいですか？
送信ボタンをクリックすると、フォームが自動的に送信されます。 HTMLフォームを使用すると、ユーザー入力を簡単に受け取ることができます。タグは、フォーム要素を追加することにより、ユーザー入力を取得するために使用されます。さまざまな種類のフォーム要素には、テキスト入力、ラジオボタン入力、送信ボタンなどがあります。 HTMLフォームで送信ボタンを使用する方法について学びましょう。また、HTMLのタグを使用して作成されますが、タイプ属性はボタンに設定されています。次のコードを実行して、送信ボタンを使用してフォームを送信およびリセットできます。アクションの下、属性は、送信をクリックし
HTMLで必要な属性を使用するにはどうすればよいですか？
HTMLの必須属性が使用されますoフォームを送信する前に、要素を入力する必要があることを指定します。フィールドに入力せずに送信ボタンをクリックすると、エラーが発生し、フォームの送信に失敗します。エラーは「このフィールドに入力してください」になります。必要な属性は、input、select、およびtextarea要素で使用できます。例次のコードを実行して、HTMLで必要な属性を使用する方法を学ぶことができます。 <!DOCTYPE html> <html> <head> <t