How to use HTML template tag with jQuery?

Question

Something strange bug is going on in my code. I want to use HTML template tag with jQuery, because all the rest of my code is jQuery, but I only found JavaScript examples with it. I tried to "translate" from JavaScript to jQuery, this is what I came up with.

$.getJSON( "../Controller/ControllerBookstore.php?show_books=true", function( data ) {
        $.each( data, function( index, value ) {
            // let clone = document.getElementById('table-template').content.cloneNode(true);
            // clone.querySelector('#id').innerText = value.id;
            // clone.querySelector('#author').innerText = value.author;
            // clone.querySelector('#title').innerText = value.title;
            // clone.querySelector('#isbn').innerText = value.isbn;
            let clone = $("#table-template").clone(true);
            $("#id",clone).text(value.id);
            $("#author",clone).text(value.author);
            $("#title",clone).text(value.title);
            $("#isbn",clone).text(value.isbn);
            //$(".container").append(clone);
            $("#header").append(clone);
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

        <div id="myAlert" class="alert alert-success collapse">
            <span id="alert-text"></span>
            <a id="alert-close" class="close" href="#" aria-label="Close">&times;</a>
        </div>

        <div class="row" id="header">
            <div class="col"><h5>ID</h5></div>
            <div class="col"><h5>Author</h5></div>
            <div class="col"><h5>Title</h5></div>
            <div class="col"><h5>ISBN</h5></div>
            <div class="col"><h5>Action</h5></div>
        </div>

        <template id="table-template">
            <div class="row">
                <div class="col" id="id"></div>
                <div class="col" id="author"></div>
                <div class="col" id="title"></div>
                <div class="col" id="isbn"></div>
                <div class="col buttons">
                    <button class='btn btn-info edit'>Edit</button>
                    <button class='btn btn-danger delete'>Delete</button>
                </div>
            </div>
        </template>
        
        <div class="row justify-content-center" >
            <form action="" class="col-4">
                <input id = "id-box" type="hidden" name="id">
                <div class="form-group row">
                    <label class="col-4">Author</label>
                    <input id = "author-box" type="text" class="form-control col-8" name="author" placeholder="Enter the author of the book">
                </div>
                <div class="form-group row">
                    <label class="col-4">Title</label>
                    <input id = "title-box" type="text" class="form-control col-8" name="title" placeholder="Enter the title of the book">
                </div>
                <div class="form-group row">
                    <label class="col-4">ISBN</label>
                    <input id = "isbn-box" type="text" class="form-control col-8" name="isbn" placeholder="Enter the ISBN of the book">
                </div>
                <div class="form-group row">
                    <button id = "submit" type="submit" name="save" class="btn btn-primary col-12">Save</button>

                </div>
            </form>
        </div>
</div>

For some reason the JavaScript code I commented out works, but it only appends "clone" to my ".container" correctly, on the next line below the form. However I want to attach it to my ".header", but it attaches next to the header, not below it. The jQuery code doesn't do anything, it doesn't attach my "clone" anywhere. I hope I was clear. Could you please help me to find the reason of the bugs?

Answer 1

Thanks for the example. But I don't change the id of the "collapse" div. The rest of the objects are cloned normally.

<template id="facilities_template">
  <div class="collapse">
    <div class="form-check icon-check">
      <input class="form-check-input" type="checkbox">
      <label class="form-check-label font-14" id="facilities_name" ></label>
      <i class="icon-check-1 far fa-square color-gray-dark font-20"></i>
      <i class="icon-check-2 fa fa-check-square font-20 color-green-dark"></i>
    </div>
    <div class="mb-3"></div>
  </div>    
</template>

JavaScript:

let cloneFacility = $($('#facilities_template').html()); 
$('#facilities_name', cloneFacility).text(value.name);
$('#facilities_name', cloneFacility).attr('data-facility-id', value.id);
$('#collapse', cloneFacility).attr('id','collapse'+ value.id)
$('#facilities_template').before(cloneFacility);
$('#faсility_filter').append(cloneFacility);

Answer 2

jQuery bug

Hello my friend. You are cloning the incorrect element, because your create a clone of template with the id #table-template. Please, make this change to your code:

...
let clone = $("#table-template").html();
...

The other thing, the cloned code appears next to #header and not below it because you are using a .row class. I propose to create a div below the #header, with the id="body" and append the new content inside:

...
// $("#header").append(clone);
-> $("#body").append(clone);
...

Answer 3

A few changes are needed:

• The id value of the template has a hyphen which must be escaped in the selector. Two backslashes are needed in the string literal; the first is needed to actually get a backslash in the string. The remaining one will be interpreted by the selector.
• Clone the row element within the template, not the template itself. However, jQuery will not know of a DOM within the template tag, so you could just take the HTML content instead of cloning, and then turn that into a jQuery object again (which produces the DOM for it).
• Insert the clone just before the template

Code:

let clone = $($("#table\\-template").html()); // <--------
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
$("#table-template").before(clone); // <------

As others have commented, id attributes should have unique values, so your template content cannot have id properties (since it gets cloned). Use class attributes instead.