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

Answer 1

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.