<div id = "first"></div>
<div id = "second"></div>
<div id = "third"></div>
尝试在 javascript 函数中动态附加到这些 div
if (condition??) variable = "first"
else if (condition) variable = "second"
else variable = "third"
let div = document.getElementById(variable);
根据某些条件，上面的变量可以是第一、第二或第三。
div.appendChild(img)
div.appendChild(text)
然而，由于 div 最终为空，我将无法向它追加任何内容，因为出现以下错误。
Cannot read property 'appendChild' of null.
那么知道如何解决这个问题吗？
编辑：在下面添加了实际的代码片段
// my html
<div id = "list" class = "center"> Listing <br><br>
<div id = "first"></div>
<div id = "second"></div>
<div id = "third"></div>
</div>
//my js
$.ajax({
async: true,
type: 'GET',
url: "rankings/" + boss + ".txt",
boss : boss,
success: function(sData){
let temp = this.boss
let div = document.getElementById(temp);
//console.log(temp) logs "first" on the console
let img = document.createElement("img");
let text = document.createElement('td1');
img.src = "images/" + temp + ".jpg";
img.alt = temp
div.appendChild(img)
div.appendChild(text)
编辑 2：代码执行的图像
您的代码看起来正确！但是，我认为问题是，您是在呈现 DOM 之前加载 Javascript（例如，您正在 中加载脚本<head>）。所以javascript无法找到div..
var variable= "second";
var boss = "boss_baby";
let div = document.getElementById(variable);
console.log(variable) //logs "first" on the console
let img = document.createElement("img");
let text = document.createElement('td1');
img.src = "images/" + boss + ".jpg";
img.alt = boss
div.appendChild(img)
div.appendChild(text)#first, #second, #third {
display:block;
border: 1px solid blue;
height: 50px;
width: 200px;
margin : 10px;
}<div id = "list" class = "center"> Listing <br><br>
<div id = "first"></div>
<div id = "second"></div>
<div id = "third"></div>
</div>要解决此问题，您可以<script>在 body 标签结束之前加载right</body>
或在onload方法中添加所有脚本
window.onload = function() {
// all your JS code goes here
}
或者
document.onload = function() {
// all your JS code goes here
}
问题编辑后：
您的代码看起来正确！但是，现在我怀疑您尝试访问的元素在您从 ajax 收到响应时可能已被删除。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句