Как использовать <template>с динамическими идентификаторами? - PullRequest
Новая
       28

Как использовать <template>с динамическими идентификаторами?

0 голосов
/ 28 мая 2019

Имеется такой HTML-шаблон: 

<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>

Я загружаю и добавляю этот шаблон через JS, вот так: 

let templateInstance = document.getElementById("paragraph-template");
myContainer.appendChild(templateInstance)

Теперь я хотел бы добавить шаблоннесколько раз (т. е. в цикле for), и я хочу, чтобы каждый элемент <p> имел уникальный идентификатор, поэтому результат будет выглядеть, например, как: 

<div>
<p id="p1">Hi, I am a paragraph</p>
<p id="p2">Hi, I am a paragraph</p>
<p id="p3">Hi, I am a paragraph</p>
<div>

Как этого добитьсяHTML-шаблоны?

РЕДАКТИРОВАТЬ: Пример, который я привожу здесь, является минимизированным - это мой шаблон с элементами Мэнни, который должен получить уникальный идентификатор.

1 Ответ

3 голосов
/ 28 мая 2019

Я предлагаю вам: 

    let templateInstance = document.getElementById("paragraph-template");
    for(var i=1;i<4;i++){
        let clone = document.importNode(templateInstance .content, true);       
        clone.querySelector('p').id = "p"+i;
        myContainer.appendChild(clone); 
    }
...