Javascript 如何在jQuery.load（）之后更新DOM？

我想从模板文件（b.xhtml）加载html内容，将其插入调用文件（a.xhtml），然后更新插入的节点（例如添加/删除属性等）

插入部分工作正常，但DOM似乎没有得到更新

这是测试用例

a.xhtml（调用html文件）

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#占位符”）.load（“b.xhtml#id2”）；
//为什么这样不行？
var myTemp=document.querySelector（“#id2”）；
如果（myTemp）{
警报（myTemp.innerHTML）；
}否则{
警报（“id2未定义”）；
};
});
});
jQuery负载测试
加载模板

b.xhtml（模板html文件）

这是一个模板

这是模板二

如何在.load（）之后更新DOM

有没有一种更简单的方法可以从自动更新DOM的外部HTML文件中插入HTML节点

或者，在将b.xhtml插入a.xhtml之前（或之后），如何从b.xhtml更改或添加节点的属性？例如，如何将alt=“template text”属性添加到#id2节点 .load（）方法是异步的，因此您的脚本正在执行该行，但不会等到它完成后再继续执行下一行。你可以做几件事。首先，使用回调函数：

$("#placeholder").load("b.xhtml #id2", function(){
            var myTemp = document.querySelector("#id2");
            if (myTemp) {
                alert(myTemp.innerHTML);
            } else {
                alert("#id2 is undefined");
            };
});

或者，使用.done（）

---

试着这样做：

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#placeholder").load("b.xhtml #id2",function()
                {
                    var myTemp = document.querySelector("#id2");
                    if (myTemp) {
                      alert(myTemp.innerHTML);
                    } else {
                      alert("#id2 is undefined");
                    };
                });
            });
        });
    </script>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#占位符”）.load（“b.xhtml#id2”，函数（）
{
var myTemp=document.querySelector（“#id2”）；
如果（myTemp）{
警报（myTemp.innerHTML）；
}否则{
警报（“id2未定义”）；
};
});
});
});

使用

load（）

完成回调，因为它是异步的。在DOM中插入新元素将触发（sic）“回流”，它将在当前脚本停止执行后运行。因此，当您尝试选择元素时，它还不在DOM中。使用如下所述的回调，该回调仅在回流完成后触发。或者在回流后使用延迟到队列javascript，这或多或少也是如此。（如果我没有弄错的话，jquery在后台也会这么做。）谢谢你的回答，但Cruiser比你快了一分钟，还提供了两种解决方案：-（我正在尝试使用.done方法，但是我得到了错误

未捕获的TypeError:$（…）.load（…）.done不是一个函数

-有什么想法吗？我正在使用jQuery 3.1.0。有问题的行是

$（“#宋”）.load（）http://kvrx.org #曲目名称：eq（0）”.done（函数（）{track['trackTitle']=song.innerHTML}）；

-我正在尝试更新一个对象（定义在这行的正上方）的trackTitle属性。

$("#placeholder").load("b.xhtml #id2", function(){
            var myTemp = document.querySelector("#id2");
            if (myTemp) {
                alert(myTemp.innerHTML);
            } else {
                alert("#id2 is undefined");
            };
});

$("#placeholder").load("b.xhtml #id2").done(function(){
            var myTemp = document.querySelector("#id2");
            if (myTemp) {
                alert(myTemp.innerHTML);
            } else {
                alert("#id2 is undefined");
            };
});

    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#placeholder").load("b.xhtml #id2",function()
                {
                    var myTemp = document.querySelector("#id2");
                    if (myTemp) {
                      alert(myTemp.innerHTML);
                    } else {
                      alert("#id2 is undefined");
                    };
                });
            });
        });
    </script>