要素の追加

要素の追加（createElement）

今までは、既存の要素からidやclassを使って取得して来るということをしていました。
今度は逆に、新しく要素を 「追加する」 方法についてです。

ボタンがクリックされたら、文字列を増やしていくというものを例に見ていきます。

一つの機能を実装するのにも色々な書き方があるので、今回は2つの方法を見ていきます。

＜書き方その１（addEventListenerを使用するパターン）＞

<body>
    <input type="button" value="クリック" id="createBtn">
    <ul>
        <li>item</li>
        <li>item</li>
    </ul>
    <script src="js/main.js"></script>
</body>

要素を 「追加」 するためには createElement を使用します

document.querySelector('#createBtn').addEventListener('click', function() {
    let item = document.createElement('li');
    item.textContent = 'item';

    let ul = document.querySelector('ul');
    ul.appendChild(item);
});

解説
① まずquerySelector で 対象のinput要素を取得
② addEventListener で「クリックされたら〜…」というイベントを追加
③ createElement を使って追加したい要素の名前を 文字列 で入れる。今回は li
④ 作成した li を2行目で item という変数に入れていますが、この時点ではまだ中身は空です
⑤ textContent で 「item」 という文字列を入れる
⑥ ul タグの子要素である li に「item」を追加するという意味で、 ul.appendChild(item) と記述する

ちなみに、今まではquerySelector で取得した要素は次のようにいったん変数に代入して使っていました。

//今までは取得した要素を次のように代入して使っていた
let createBtn = document.querySelector('#createBtn');
createBtn.addEventListener...

しかし、今回のように addEventListener をそのままドットで繋いで書くこともできます。

それでは、解説に戻ります。
2行目の createElement('li') の時点では以下のような状態ですね

<li></li>

続いて、 <li>item</li> の形に持っていきたいので、④で変数に代入して⑤の textContent で item が入ります。

<li>item</li>

今の時点で、このような形が完成しました。
後は、この <li>item</li> をどこに配置するかという問題だけです。
HTMLを見てみると、

    <ul>
        <li>item</li>
        <li>item</li>
    </ul>

このように li タグは ul タグの子要素として配置されているので ul.appendChild(item) と書くと設置することができます。

＜書き方その２ クリックイベントを使用するパターン＞

HTMLにクリックイベントを仕込んで、JavaScript側から関数を作成する方法です。

<body>
    <input type="button" value="クリック" onclick="createBtn()">
    <ul>
        <li>item</li>
        <li>item</li>
    </ul>
    <script src="js/main.js"></script>
</body>
function createBtn() {
    let item = document.createElement('li');
    item.textContent = 'item';
    let ul = document.querySelector('ul');
    ul.appendChild(item);
}

課題

理解度チェック
JavaScript→2-4というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。
（この問題は、ファイルを一つにするために、HTMLの中でCSSとJavaScriptを読み込む書き方をしています。以下のコードをコピーして問題を解いてください。）

問1：以下の要件を満たすように「追加ボタン」と「削除ボタン」実装してください。

・「追加ボタン」：指定した文字列をテキストエリアに追加することができる。
・「削除ボタン」：出力されたテキストを空にする。
・削除ボタンが押された時は、入力欄に入れたテキストも消えるようにする。

カリキュラムでは触れていない内容については下に少しヒントを載せていますが、
迷ったら是非、調べながら解いてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="text1" placeholder="入力してください">
    <input type="button" value="追加" onclick="addText();">
    <input type="button" value="削除" onclick="deleteText();">
    <br>
    <textarea id="area1" cols="50" rows="8" placeholder="ここに出力されます"></textarea>
    
    <script>   
    function addText() {
        //①入力欄のテキストを取得
        
        //②出力欄のテキストエリアを取得
        
        //③出力欄に入力された文字列を足していく
        
    }

    function deleteText() {
        //④出力欄のテキストを空にする
        
        //⑤入力欄のテキストを空にする
        
    }
    </script>
</body>
</html>

【ヒント】
①「入力欄のテキストを取得」は document.getElementById('id名') に .value をつけることで、
入力された 「値」 を取得することができます。

document.getElementById('id名').value;

③「出力欄に入力された文字列を足していく」というのは、次のように表せます。

出力欄のテキストエリア += 入力された値

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami