为什么在我的 jQuery 脚本中找不到 appendTo 方法？答案

【问题标题】：Why isn't the appendTo method found in my jQuery script?为什么在我的 jQuery 脚本中找不到 appendTo 方法？
【发布时间】：2023-03-14 13:30:01
【问题描述】：

我正在使用 JQuery 模板功能在 html 文件中呈现我的模板。我已通过以下方式加载库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="../static/js/Dashboard.js"></script>

当我在元素上调用空方法后跟 $(...).tmpl(...).appendTo 时，它什么也不显示并给出错误：

TypeError: $(...).tmpl(...).appendTo 不是函数

但是，如果我使用 innerHTML 或手动将变量设置为空字符串，它会显示旧数据以及更新数据。

你能告诉我我的代码有什么问题吗：

(function(){
GetList();

$('#btnUpdate').click(function() {
$.ajax({
    url: '/updateList',
    data: {
        title: $('#editTitle').val(),
        description: $('#editDescription').val(),
        id: localStorage.getItem('editId')
    },
    type: 'POST',
    success: function(res) {
        $('#editModal').modal('hide');
        // Re populate the grid
        GetList();
    },
    error: function(error) {
        console.log(error);
    }
});
});
});

function GetList() {
$.ajax({
    url: '/getList',
    type: 'GET',
    success: function(res) {
        var listObj = JSON.parse(res);
        $('#ulist').empty();
            // var list = '';
        $('#listTemplate').tmpl(listObj).appendTo('#ulist');

    },
    error: function(error) {
        console.log(error);
    }
});
}

当点击更新按钮输入新数据时，这个新数据应该在html模板中更新

【问题讨论】：

appendTo 方法通常在 jQuery 选择器对象上调用。 tmpl() 是否符合条件？
伊舍伍德是对的。您可能必须使用相当笨重的 $($('#listTemplate').tmpl(listObj)).appendTo('#ulist') 将其转换回 jQuery 对象。
@MichaelBeeson 尝试您的建议可消除控制台中的错误，但数据仍未在模板中呈现

标签： javascript jquery html ajax jquery-templates

【解决方案1】：

以this documentation为例：

$.tmpl( $("#listTemplate").html(), listObj ).appendTo( "#target" );

基本上作为大纲：

$.tmpl( myTemplate, myData ).appendTo( "#target" );

第一个参数是字符串形式的模板，第二个参数是你的 json 对象，然后以这种方式附加结果。

【讨论】：