jQuery .get（）成功回调中的DOM更改未反映在页面

Question

这是我在这里提出的第一个问题，我完全难过了。基本上，我有一个看起来像这样的购物车页面：

该网站由客户上传图片进行打印，因此每个订单实际上都是一张图片。每个购物车项目都是使用JS DOM功能动态生成的，但我遇到问题的部分是＆＃34;项目＃1＆＃34;标题行。它应该包含订单图像的缩略图（由客户上传），这是我从Laravel API端点获得的。它返回图像的base64字符串，我将其设置为图像源，如下所示：

var tbody = document.createElement('tbody');

var productImageRow = document.createElement('tr');
var productImageTD = document.createElement('td');
var productImage = document.createElement('img');
productImageTD.colSpan = 2;

if (order.productType == PRODUCT_TYPES.CONDUCTION_PLATES) {
    /* Some irrelevant code here... */
} else {
    $.get(<API Endpoint here>, function(data) {
        productImage.src = data;
    });
}

productImageTD.appendChild(productImage);
productImageRow.appendChild(productImageTD);
tbody.appendChild(productImageRow);

问题是，即使我更改了图像src，它也没有反映在浏览器中（因此表格标题下面的空行）。

我确信API正在运行，因为我在另一个页面中执行完全相同的操作并且工作正常。除此之外，如果我将数据变量中的base64字符串记录到控制台并直接将其放在html中

<img src="<my base64 string>">

它显示图像正常，因此我确定base64字符串有效。

我也知道正在执行成功块，因为它内部的警报会执行。进一步测试时，在回调中完成的任何DOM操作都不会反映在浏览器中。例如：

var DOMTest = document.createElement('h1');
DOMTest.innerHTML = "Before Callback";
productImageTD.appendChild(DOMTest);
...
    $.get(<API Endpoint here>, function(data) {
        //productImage.src = data;
        DOMTest.innerHTML = "After Callback"
        alert(DOMTest.innerHTML);
    });

结果是页面仍然显示h1为＆＃34;在回调之前＆＃34;，但是警报显示innerHTML为＆＃34; After Callback＆＃34;。我在Safari和Chrome上测试了这个。

我很确定我可能会犯一些愚蠢的错误。有任何想法吗？我完全迷失在这里。