Render a list of tags using template HTML element

Question

I discovered today the template tag and I really like it.

<div class="items">
    <template id="item-template">
        <div class="item">
            <div class="text">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing
                    elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore et dolore magna aliquyam erat, sed diam
                    voluptua. At vero eos et accusam et justo duo
                    dolores et ea rebum. Stet clita kasd gubergren,
                    no sea takimata sanctus est Lorem ipsum dolor.
                </p>
            </div>
            <div class="source">
                Lorem ipsum, pag 12
            </div>
            <div class="tags">
                <a href="#">Tag 1</a>
                <a href="#">Tag 2</a>
                <a href="#">Tag 3</a>
            </div>
        </div>
    </template>
</div>

I used the template like this and it is working:

var quotes = [
    {
        text: "asdasd asdasd asdasdasd asdasd1",
        source: "source 111",
        tags: ["123", "18767"]
    },
    {
        text: "asdasd asdasd asdasdasd asdasd2222",
        source: "source 222",
        tags: ["22223"]
    },
    {
        text: "asdasd asdasd asdasdasd asdasd333",
        source: "source 333",
        tags: ["33323", "3338767"]
    },
];


function render_quote(text, source, tags) {
    var item_template = document.getElementById("item-template").content;

    var clone = document.importNode(item_template, true);
    clone.querySelector("div.text").textContent = text;
    clone.querySelector("div.source").textContent = source;
    clone.querySelector("div.tags").textContent = tags;

    return clone;
}

if ('content' in document.createElement('template')) {
    var items_container = document.querySelector("div.items");

    quotes.forEach(quote => {
        items_container.appendChild(render_quote(quote.text, quote.source, quote.tags));
    })

} else {
    console.log("template feature missing.");
}

The problem is I don't know how to render the list of tags. I want to keep them as links. And the tags number is not the same all the time. Can you give me a hint?

Answer 1

just do it in this way!

function render_quote(text, source, tags) {
    var item_template = document.getElementById("item-template").content;

    var clone = document.importNode(item_template, true);
    clone.querySelector("div.text").textContent = text;
    clone.querySelector("div.source").textContent = source;
    const tagsContainer = clone.querySelector("div.tags")
    tags.forEach(tag => {
        const tagElement = document.createElement('a');
        tagtagElementiv.textContent = tag;
        tagElement.href = "#"
        tagsContainer.appendChild(tagElement);
    })

    return clone;
}```;

Answer 2

You could replace clone.querySelector("div.tags").textContent = tags; by

clone.querySelector("div.tags").innerHTML = tags.reduce((html, tag) => html += `<a href="#">${tag}</a> `, '');

Note that I use innerHTML where you use textContent

var quotes = [
    {
        text: "asdasd asdasd asdasdasd asdasd1",
        source: "source 111",
        tags: ["123", "18767"]
    },
    {
        text: "asdasd asdasd asdasdasd asdasd2222",
        source: "source 222",
        tags: ["22223"]
    },
    {
        text: "asdasd asdasd asdasdasd asdasd333",
        source: "source 333",
        tags: ["33323", "3338767"]
    },
];


function render_quote(text, source, tags) {
    var item_template = document.getElementById("item-template").content;

    var clone = document.importNode(item_template, true);
    clone.querySelector("div.text").textContent = text;
    clone.querySelector("div.source").textContent = source;
    clone.querySelector("div.tags").innerHTML = tags.reduce((html, tag) => html += `<a href="#">${tag}</a> `, '');

    return clone;
}

if ('content' in document.createElement('template')) {
    var items_container = document.querySelector("div.items");

    quotes.forEach(quote => {
        items_container.appendChild(render_quote(quote.text, quote.source, quote.tags));
    })

} else {
    console.log("template feature missing.");
}

<div class="items">
  <template id="item-template">
    <div class="item">
      <div class="text">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing
          elitr, sed diam nonumy eirmod tempor invidunt ut
          labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor.
        </p>
      </div>
      <div class="source">
        Lorem ipsum, pag 12
      </div>
      <div class="tags">
        <a href="#">Tag 1</a>
        <a href="#">Tag 2</a>
        <a href="#">Tag 3</a>
      </div>
    </div>
  </template>
</div>