jQueryのHTMLの操作とは？初心者向け解説

この記事では、jQueryのメソッドを使用して、HTMLの要素を操作する方法を説明します。

jQueryのセレクタとは？初心者向け解説

テキストの設定

要素内のテキストを設定する場合は、textメソッドを使用します。

■Javascript

$(function(){
    $('#txt').text('テキストの変更');
});

■HTML

<body>
    <p id="txt">テキスト</p>
</body>

このコードを実行すると、画面に表示される文字は、”テキストの変更”となります。

参考：
.html() | jQuery API Documentation

HTML要素を設定する場合は、htmlメソッドを使用します。

■Javascript

$(function(){
     $('#txt').html('<p>こんにちは</p>');
});

■HTML

<body>
    <div id="txt"></div>
</body>

このコードを実行すると、次のようになります。

■実行結果

<body>
     <div id="txt"><p>こんにちは</p></div>
 </body>

<div id=”txt”>をセレクタとして選択しています。このセレクタの中に、’<p>こんにちは</p>’を追加しています。

要素を削除する場合は、removeメソッドを使用します。

■Javascript

$(function(){
     $('#txt').remove();
});

■HTML

<body>
    <div id="txt">こんにちは</div>
</body>

このコードを実行すると、画面には何も表示されなくなります。<div id=”txt”>に対し、removeメソッドを実行しているため、そのセレクタの要素は削除されます。

参考：
.remove() | jQuery API Documentation

今回は、jQueryのメソッドを使用して、HTMLの要素を操作（テキストの設定、HTML要素の設定、HTML要素の削除）をする方法を説明しました。