克隆模板时如何更改内部 div？

Question

我有一个模板，我正在克隆它来制作单页应用程序。在这个模板中有一些 div 应该有一个唯一的 id，这样当我打开多个应用程序时它应该在dividually 中工作（克隆多个 divs）

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

谢谢

Answer 1

clone.id 未定义，因为克隆是一个 #document-fragment 有两个 children.

您需要查询 'name' child 并更改其 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)
}

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

克隆模板时如何更改内部 div？

How to change inner div's when cloning a template?

javascript

clone