hiramatch's blog

iOSアプリ開発に目覚め、毎日勉強の日々です。

JavaScriptで要素追加、削除

数ヶ月間ブログを放置してしまいましたが、ひさしぶりに再開しました。

現在はjavaScript, jQueryをやっています。
iOSはこの後やりたいと考えています。

javaScriptで簡単なプログラム作ってみました。
ボタンで要素を追加, 削除, フォントカラーを変えるものです。

まだまだ未熟なので「ここをこうした方がいい」というのがありましたら
ご指摘等いただけるとありがたいです。

今後ともよろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>イベント</title>
</head>
<body>
    <!-- スクリプトの対象となる要素はスクリプトの前に記述しないと行けない -->
    <P id="test">こんにちは!</P>
    <button id="add">追加1</button>
    <button id="add2">追加2</button>
    <button id="chg">変更</button>
    <button id="delete">削除</button>
    <script>
        var idNum = 0;
        document.getElementById('test').style.color = 'black';
        document.getElementById('add').addEventListener('click',
        function() {
            var e = document.createElement('P');
            e.id = 'id' + ++ idNum;
            var text = document.createTextNode('Add 1');
            document.body.appendChild(e).appendChild(text);});

        document.getElementById('add2').addEventListener('click',
        function() {
            var e = document.createElement('H1');
            e.id = 'id' + ++idNum;
            var text = document.createTextNode('Add 2');
            document.body.appendChild(e).appendChild(text);});

        document.getElementById('chg').addEventListener('click',
        function() {
            var e = document.getElementById('test');
            console.log(e.style.color);
            if(e.style.color == 'black') {
                e.style.color = 'red';
            } else {
                e.style.color = 'black';
            }
        })
        document.getElementById('delete').addEventListener('click',
        function() {
            if(idNum > 0){
                var e = document.getElementById('id' + idNum--);
                document.body.removeChild(e);
           }
       })
    </script>
</body>
</html>

以下は実行画面です。
f:id:hiramatch:20151129110803p:plain