More than 3 years have passed since last update.

【JavaScript】DocumentFragmentオブジェクトで一括で要素を追加する

JavaScript

Posted at 2021-07-10

DocumentFragmentオブジェクトはDOMのツリー構造をシンプルに作成することが出来ます。
例を挙げると、

タグを動的に追加したい場合に有効です。

実際にFragmentオブジェクトを使ってliタグに値を追加するシンプルな例を作成しました。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!--個別のファイル-->
<link rel="stylesheet" href="./css/style.css" />
<script type="text/javascript" src="./js/sample.js"></script>
<title>Sample App</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <p class="lead">createDocumentFragmentを使ったサンプル</p>
                <ul id="shopinfo">
                <li id="list1">リスト１</li>
                <li id="list2">リスト２</li>
                </ul>

                <button class="btn btn-success" id="addBtn">追加</button>
            </div>
        </div>
    </div>
</body>
</html>

sample.js


//ページロード時に実行されるイベントリスナー"DOMContentLoaded"を登録する。
document.addEventListener('DOMContentLoaded',function(){
    
    //idをキーに要素を取得する。
    let btnId = document.getElementById('addBtn');
    
    //ID=btnIdが付与されたボタンにクリックイベントを登録する。
    btnId.addEventListener('click',(e)=>{
        
        //DocumentFragmentオブジェクトを作成する。
        let fragment = document.createDocumentFragment();
        
        //liタグを新規作成する。
        let child1 = document.createElement('li');
        
        //liタグに値「リスト３」を入れる。
        child1.append(document.createTextNode('リスト３'));

        let child2 = document.createElement('li');
        
        //liタグに値「リスト４」を入れる。
        child2.append(document.createTextNode('リスト４'));

        //fragment要素に値をそれぞれ追加する。
        fragment.append(child1);
        fragment.append(child2);

        //親要素Uiタグを特定する。
        let parentnodeUi = document.getElementById('shopinfo');
        
        //Uiタグにfragment要素を格納する。
        parentnodeUi.append(fragment);
    },false);
},false);

ボタンをクリックすると...
(before)

(after)

こんな感じになります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up