テンプレートを複製する際に内部divを変更するにはどうすればいいですか？

Question

私は単一ページアプリケーションを作るためにクローンを作成しているテンプレートを持っています。このテンプレートの中に、私は、複数のアプリケーション（クローン複数のdiv）

<template id="templ"> 
<div id="name"></div> 
<div id="btn"> 
    <fieldset id="fld"> 
    <input type="text" id="userMessage"placeholder="Type your message…" autofocus> 
    <input type="hidden"> 
    <button id="send" >Save</button> 
    </fieldset> 
</div> 
</template> 

を開いたとき、それは個別に作業しなければならないように、ユニークなIDを持っていなければならないいくつかのdivのはあると私は、この

var i =0 
let template = document.querySelector('#templ') 
let clone = document.importNode(template.content, true) 
clone.id = 'name' + ++i // I can't change the Id o this name div 
document.querySelector('body').appendChild(clone) 

のようにそれをクローン化しています

ありがとう

Answer 1

clone.idはクローンが#document-fragmentであり、2人の子供がいるため、未定義です。

const template = document.querySelector('#templ') 
const body = document.querySelector('body') 

function appendClone(index){ 
    let clone = document.importNode(template.content, true) 
    clone.getElementById('name').id = 'name' + index 
    // all other elements with IDs 
    body.appendChild(clone) 
} 

その後、あなたはクローンの量を反復処理することができますし、単にループインデックスとの関数を呼び出す：

あなたは「名前」の子供を照会し、そのIDを変更、このような例のためにする必要があり

let clones = 5 
for (let i = 0; i < clones; i++){ 
    appendClone(i) 
} 

Answer 2

動的HTMLデータをスクリプト要素に格納し、必要に応じて動的データを置き換えて追加します。

HTMLデータ：

<script id="hidden-template" type="text/x-custom-template"> 
    <div id='${dynamicid}'> 
     <p>${dynamic_data}</p> 
    </div> 
</script> 

スクリプトを交換して追加します。

var template_add = $('#hidden-template').text(); 
var items = [{ 
    dynamicid: '1', 
    dynamic_data: '0' 
    }]; 

function replaceDynamicData(props) { 
    return function(tok, i) { 
     return (i % 2) ? props[tok] : tok; 
    }; 
} 
var dynamic_HTML = template_add.split(/\$\{(.+?)\}/g); 
$('tbody').append(items.map(function(item) { 
    return dynamic_HTML.map(replaceDynamicData(item)).join(''); 
}));