AJAX 內的動態 appendChild 成功

Question

我是 web 開發的新手。

我已經從 ajax 成功 function 渲染文本。 我想在每個文本行下添加 canvas 。

在 AJAX 內成功，我嘗試了以下兩個，文本渲染成功並且文本 id 成功動態分配，但它們都失敗了Cannot read property 'appendChild' of null ，我認為document.getElementById('result'+idx).appendChild(canv); 好像我使用document.body.appendChild(canv); 我得到了畫布，但不在所需的位置。

我不知道為什么getElementById會得到 null，我也嘗試了'result'+idx.toString() ，但它也不起作用。

$.each(cat_result, function(idx, value) { 
text.append('<id="result'+idx+'">'+'<br>');
canvas_and_plot(idx,cat_result[idx][8],cat_result[idx][9],cat_result[idx][10])
});
$('#result').replaceWith(text);

$.each(cat_result, function(idx, value) { 
text.append('<id="result'+idx+'">'+'<br>');
});
$('#result').replaceWith(text);
$.each(cat_result, function(idx, value) { 
canvas_and_plot(idx,cat_result[idx][8],cat_result[idx][9],cat_result[idx][10])
});

HTML

<p class="result-box" id="result-box">The result is : <br><strong id="result"></strong></p>

JS function

function canvas_and_plot(idx,a,b,c) {
var canv = document.createElement("canvas");
canv.width = 200;
canv.height = 200;
canv.setAttribute('id', 'canv_'+idx);
canv.style.position = 'relative';
canv.style.float = 'left';
document.getElementById('result'+idx).appendChild(canv); // Cannot read property 'appendChild' of null
//other code that does the plotting
}

Answer 1

嘗試這個：

document.getElementById('"result'+idx+'"').appendChild(canv); 

Answer 2

我不知道為什么在多次嘗試后圍繞getElementById格式化不起作用。 我通過使用普通的 canvas HTML 在文本中創建 canvas 來解決問題text.append和它的作品。