【HTML】【Javascript】template要素を使った動的生成

JavaScript

2020.08.23

template要素を使って要素を動的に生成する方法を記載します。

index.html
index.css
main.js

の3ファイルをこのサンプルでは使用しています。

JQueryを使用しているので注意。

<!DOCTYPE html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <link rel="stylesheet" type="text/css" href="index.css" charset="UTF-8">
    <script type="text/javascript" src="vendor/jquery-3.5.1.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="main.js" charset="UTF-8"></script>
</head>
<body>
    <div class="AddArea">
    </div>
</body>

<template id="templateAdded">
    <div class="added">
        <p></p>
    </div>
</template>
</html>

.added{
    width: 100px;
    height: 100px;
    background-color: burlywood;
}

$(function(){
    const content = document.querySelector("#templateAdded").content
    const flagment = document.createDocumentFragment();
    for(let idx = 0; idx < 100; idx++){
        const clone = document.importNode(content, true);        
        $(clone.firstElementChild).find("p").text(idx + "");
        flagment.appendChild(clone)
    }
    $(".AddArea").append(flagment)
});

できるもの