ホームページ > 記事 > ウェブフロントエンド > jqueryでhtml()メソッドを使用する方法
jqueryでhtml()メソッドを使用する方法
- 醉折花枝作酒筹オリジナル
- 2021-06-08 14:33:285009ブラウズ
JavaScript では、「html()」メソッドの使用法は「element.html (選択された要素の新しいコンテンツ)」です。 html メソッドは、選択された要素のコンテンツを設定または返します。このメソッドを使用してコンテンツを返すと、最初に一致した要素のコンテンツが返されます。このメソッドを使用してコンテンツを設定すると、一致するすべての要素のコンテンツが書き換えられます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
HTML コンテンツとは、コンテンツに HTML タグを含めることができ、ブラウザーで表示できることを意味します。
テキスト コンテンツは、HTML タグが表示されないように、まずコンテンツ内の HTML 定義済み文字を HTML 文字エンティティに変換します。
構文構造 1:
$(selector).html()
このとき、メソッドがパラメーターを受け取らない場合は、最初に一致した要素の HTML コンテンツを取得します。
このメソッドはパラメータのない text() メソッドに似ていますが、大きな違いがあります。
1.html() メソッドは最初に一致した要素のコンテンツを取得しますが、text( ) メソッドは、一致するすべての要素に含まれるコンテンツを取得することです。
2. html() メソッドはコンテンツ HTML コンテンツを取得し、text() メソッドはテキスト コンテンツを取得します。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title></title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert($("div").html());
});
});
</script>
</head>
<body>
<div>
<ul>
<li>
<span>欢迎您</span>
</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>上記のコードは、div 要素のコンテンツを返します。
文法構造 2:
$(selector).html(content)
パラメータを使用して、一致するすべての要素の HTML コンテンツを設定します。
このメソッドはパラメータを備えた text() メソッドに似ていますが、大きな違いがあります。
html() メソッドは HTML コンテンツを設定し、text() メソッドはテキスト コンテンツを設定します。
コード例:
次のコードは、div 内の HTML コンテンツを「a4b561c25d9afb9ac8dc4d70affff419I am the content after restart0d36329ec37a2cc24d42c7229b69747a」に設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div
{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").html("<b>我是重新设置后的内容</b>");
});
});
</script>
</head>
<body>
<div>原来内容</div>
<button>点击查看效果</button>
</body>
</html>[推奨学習: JavaScript 上級チュートリアル]
以上がjqueryでhtml()メソッドを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。