jQueryを使用したクリック時のdivへの追加方法

2024-02-08 21:20 jQueryHTMLイベントハンドラ

まず、HTMLファイルにjQueryを追加します。以下のCDNリンクをセクション内に追加してください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

次に、div要素を作成し、クリックイベントを追加します。以下は、クリック時にdivにテキストを追加する例です。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">クリックしてください</div>
<script>
$(document).ready(function(){
    $("#myDiv").click(function(){
        $(this).text("クリックされました！");
    });
});
</script>
</body>
</html>

上記のコードでは、jQueryのclick()関数を使用してdiv要素にクリックイベントを割り当てています。クリックイベントが発生すると、divのテキストが「クリックされました！」に変更されます。

もし、クリック時にdivに要素を追加したい場合は、以下のようにコードを変更します。

$(document).ready(function(){
    $("#myDiv").click(function(){
        $(this).append("<p>追加された要素</p>");
    });
});

上記の例では、append()関数を使用してクリック時にdiv内に新しい

要素を追加しています。

以上が、jQueryを使用してクリック時にdiv要素に何かを追加する方法です。これらのシンプルな例を参考にして、自身のプロジェクトに適用してみてください。