Question

我有一个模板，我正在克隆以制作单页应用程序。在这个模板中有一些div应该有一个唯一的ID，这样当我打开多个应用程序时它应该单独工作（克隆多个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)

由于

Answer 1

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

您需要查询姓名＆＃39;孩子并改变其身份，例如：

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数据存储在script元素中，并在需要时通过动态数据进行重新添加。

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？

2 个答案: