jQuery入門 - 要素操作
要素の操作
jQueryを使って要素の追加、削除、内容の変更を行う方法を学びます。
タスク
要素の追加
prepend()とappend()を使って要素を追加します
要素の削除
remove()やhide()を使って要素を削除します
内容の変更
text()やhtml()を使って要素の内容を変更します
ヒント
jQueryのメソッドを使って要素を操作しましょう。
参考コード
$(document).ready(function() {
// 1. 要素の追加
$('#add-before').click(function() {
$('#add-container').prepend('<div class="item new">前に追加されたアイテム</div>');
});
$('#add-after').click(function() {
$('#add-container').append('<div class="item new">後ろに追加されたアイテム</div>');
});
// 2. 要素の削除
$('#remove-first').click(function() {
$('#remove-container .item:first').addClass('removed');
});
$('#remove-last').click(function() {
$('#remove-container .item:last').addClass('removed');
});
// 3. 内容の変更
$('#change-text').click(function() {
$('#content-container .content-box').text('テキストが変更されました');
});
$('#change-html').click(function() {
$('#content-container .content-box').html('<strong>HTML</strong>が変更されました');
});
});