javascript - 如何在加载 JavaScript 后更改动态创建的元素

Question

我有一个网站，它对 JSON 数据发出 HTTP 请求，然后回调函数处理数据并通过动态创建一系列 div 来显示数据。我想要做的是等待该函数完成将 div 添加到页面，然后仅将标签应用于由前面的代码创建的特定 div。

HTTP 请求和回调

function data(callback){
    var url = //request url;
    var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    document.body.className = 'ok';
                    //Parse returned string into an object, then pass the object to the callback function.
                    var data = JSON.parse(request.responseText);
                    callback(data);
                } else {
                    document.body.className = 'error';
                }
            }
        };
    request.open("GET", url , true);
    request.send(null);
}
function dataDisplay(data){
    //outputs <div id="1064" class="displayed-data">
                  <p id="message1" class="hidden"></p>
}
data(dataDisplay);

上面的代码完全按照我想要的方式显示我的数据，但是当我尝试访问我想要更改的 div 的编号 ID 时，该函数在数据显示在页面上之前运行，导致“null”错误，因为我尝试更改的数据尚未添加到 DOM 中。

第二个功能更改原始内容

function label(){
    var message1 = document.createTextNode('//some label');
    var displayedData = document.getElementById('1064').getElementById('message1');
    displayedData.appendChild(message1);
    document.getElementById('message1').classList.remove('hidden');
}

如何让第二个函数等到回调完成后再尝试访问和更改它？我在回调中尝试了回调，例如: label(data(dataDisplay)); 但它仍然抛出相同的错误，所以我显然做错了。抱歉，我是 JavaScript 新手，真的不知道接下来该去哪里。

感谢您的帮助!

Answer 1

正确执行此操作的一种非常快速的方法是使用此内联函数。

data(function(result) {
  dataDisplay(result);
  label();
});

请注意，您的 data 函数本身完成得非常快 - 如果您需要从其结果中获取某些内容，则需要将其包含在其回调中。