如何在克隆模板時更改內部div？

我有一個模板，我克隆製作單頁應用程序。這裏面的模板是一些div的應該有一個唯一的ID，這樣當我打開多個應用程序（克隆多個div）如何在克隆模板時更改內部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>

應當獨立工作，我克隆它像這樣

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)

謝謝

來源

2017-10-17 Jason

放'++之間i' **（）** –

它的工作原理，因爲空間，而不是一個解決方案 – Harman

clone.id是未定義的，因爲克隆是一個#document-fragment有兩個孩子。

您需要查詢的「名」的孩子，並改變其ID，例如像這樣：

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) 
}

然後你可以遍歷克隆的量和簡單的調用函數與循環索引：

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

來源

2017-10-17 15:19:11 Barthy

，如果我說的有5個克隆這是行不通的，而不把它放在括號中。所有'名字'的孩子都會有相同的ID – Jason

那麼你當然必須迭代克隆，但我的答案保持有效。我可以在家後立即添加示例函數。另外，請記住，你將不得不改變每一個ID。 – Barthy

將動態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(''); 
}));

來源

2017-10-17 15:40:19 Yash

我想用香草JS做到這一點，謝謝 – Jason

如何在克隆模板時更改內部div？

回答

相關問題