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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…