Ajax在调用接口数据渲染过程中使用jQuery创建元素失败

问题遇到的现象和发生背景

Ajax在调用接口数据渲染过程中使用jQuery创建元素失败

问题相关代码，请勿粘贴截图

<body>
    <span id="tb"></span>
    <script>
        $(function() {
            function getbooks() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    if (res.status !== 200) {
                        return alert('调用接口失败');
                    }

                    var rows = [];
                    $.each(res.data, function(i, item) {
                        // $('#tb').prepend('<div><span>' + item.id + '</span><span>' + item.bookname + '</span><span>' + item.author + '</span><span>' + item.publisher + '</span></div>');
                        **$('#tb').append('<span></span>');**
                    });
                    $('#tb').empty().append(rows.join(''));
                })
            }
            getbooks();
        })
    </script>
</body>
运行结果及报错内容
**$('#tb').append('<span></span>');**
我的解答思路和尝试过的方法

把它放在调用接口函数之前能够正常添加元素，放在函数中未添加元素，且无任何提示

我想要达到的结果

img


empty() 方法从被选元素移除所有内容，包括所有文本和子节点。你的这句话是在调用接口之后移除了

你的res.data有数据吗