如何在 jQuery 中使用 HTML 模板标签？

Question

我的代码中出现了一些奇怪的错误。我想在 jQuery 中使用 HTML 模板标签，因为我的所有其余代码都是 jQuery，但我只找到了带有它的 JavaScript 示例。我试图从 JavaScript “翻译”到 jQuery，这就是我想出的。

$.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>

由于某种原因，我注释掉的 JavaScript 代码可以正常工作，但它只会在表单下方的下一行正确地将“克隆”附加到我的“.container”中。但是我想将它附加到我的“.header”，但它附加在标题旁边，而不是在它下面。 jQuery 代码不做任何事情，它不会将我的“克隆”附加到任何地方。 我希望我很清楚。你能帮我找出错误的原因吗？

Answer 1

需要进行一些更改：

• 模板的id 值有一个连字符，必须在选择器中转义。字符串文字中需要两个反斜杠；第一个需要实际在字符串中获得反斜杠。其余的将由选择器解释。
• 克隆模板中的行元素，而不是模板本身。但是，jQuery 不会知道 template 标记中的 DOM，因此您可以只获取 HTML 内容而不是克隆，然后再次将其转换为 jQuery 对象（为它生成 DOM）。
• 在模板之前插入克隆

代码：

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); // <------

正如其他人评论的那样，id 属性应该具有唯一值，因此您的模板内容不能具有id 属性（因为它被克隆了）。请改用class 属性。

Answer 2

jQuery 错误

你好，我的朋友。您正在克隆不正确的元素，因为您创建了 ID 为 #table-template 的 template 的克隆。请对您的代码进行此更改：

... 让克隆 = $("#table-template").html(); ...

另一件事，克隆代码出现在#header 旁边，而不是在它下方，因为您使用的是.row 类。我建议在#header 下方创建一个div，并在id="body" 下添加新内容：

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