jQuery を使用して要素の HTML を変更および読み取る方法

Inner HTML は、要素の HTML コンテンツにアクセスして変更するために使用される属性です。ここ数年で、jQuery は JS で内部テンプレートを実装するための最も人気のあるツールの 1 つになりました。この記事では、jQuery を使用して要素の HTML を変更および読み取る方法について説明します。

jQuery 内部テンプレート (インナー HTML) の構文

概念的には、内部テンプレート (インナー HTML) には DOM (Document Object Model) の操作が含まれます。 DOM を変更することで要素を操作します。以下は、HTML を変更するための基本的な jQuery 構文です。

$(selector).html(content)

上記の構文では、selector は、変更する必要がある要素を指します。 HTML のコンテンツは content 変数によって表されます。コンテンツは単純なテキストまたは HTML コードです。渡されたコンテンツが関数の場合、関数の戻り値は HTML コンテンツになります。

いくつかの例を通して、jQuery の内部テンプレート (内部 HTML) の使用法を見てみましょう。

例 1:

次の例では、「content」とマークされた要素を選択し、その新しい HTML コンテンツを「

Welcome to My Website!< /h1>」に設定します。 "：

$("#content").html("

私のウェブサイトへようこそ!

");

例 2:

次の例では、JavaScript 関数を使用して、コンテンツとしてマークされた HTML コンテンツを動的に計算します。

$("#content").html(function(){
return "今日の日付は: " Date();
});

要素の内容を読み取る (内部 HTML)

要素の内容を設定することに加えて、jQuery を使用して読み取ることもできます要素のコンテンツ (内部 HTML)。以下は、要素の HTML コンテンツを読み取るための基本的な jQuery 構文です。

$(selector).html()

この構文では、セレクターは、必要な要素を指します。読む。戻り値は要素の HTML コンテンツになります。次に、例を見てみましょう。

例 3:

次の例では、「list」としてマークされたすべてのリスト項目をスキャンし、各項目の HTML をコンソールに出力します。

$ (" #list li").each(function(){
console.log($(this).html());
});

概要

これを通じてこの記事では、jQuery の Inner HTML タグを使用して要素の HTML コンテンツを読み取り、変更する方法を学びました。また、関数を使用して要素の内容を動的に計算する方法についても説明しました。この記事が、jQuery の内部テンプレートをより深く理解し、それを使用して HTML を処理する方法を学ぶのに役立つことを願っています。

以上がjQuery を使用して要素の HTML を変更および読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。