jQueryを使って簡単なWebサイトを作成する(1)

どうもおじさんです。
基本私は飽き性なのですが、簡単なwebサイトを作成してみたいと思います。
(※続くかはわかりません)
 
巷ではreact.jsとかvue.jsとかかっこいいものが出回っていますが 、
基本的にシンプルなものが好きなので今回から「jQuery」使い倒してみたいと思います。
※生産性を考えるなら フレームワーク を使うのですがあくまで趣味なので jQuery です。
 
今回は簡単なdom操作を行うサンプルを作成します。
 
main.js
//即時関数
$(function () {
    //ボタンに対してクリックイベントを設定する
    $('#btn_01').click(function() {
        addContents();
    })
});

//コンテンツを追加する関数
function addContents() { 
    $('#main').append('<div id="test">追加されたコンテンツ</div>');
}
 
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../libs/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<title>jquery_append_sample</title>
</head>
<body>
    <!-- ヘッダ -->
    <div id="header"></div>
    
    <input id="btn_01" type="button" value="html(id=main)部分に要素追加">
    
    <!-- メイン -->
    <div id="main">
        <p>↓この下に要素が挿入される↓</p>
    </div>
    
    <!-- フッタ -->
    <div id="footer"></div>

</body>
</html>
 
ボタンを押すとページ内の要素(id=main)に要素(id=test)が追加され続けるサンプルとなっております。
 
サンプルページを実際に動く環境に置いてます。ポチポチどうぞ
→ http://d-mc.info/samples/
 
2019/09/19 サンプルページのリンク修正

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です