使用.load（）插入html文件时，javascript不会'；t识别元素并返回null_Javascript_Html_Jquery_Svg_Load

使用.load（）插入html文件时，javascript不会'；t识别元素并返回null

javascript html jquery svg

使用.load（）插入html文件时，javascript不会'；t识别元素并返回null,javascript,html,jquery,svg,load,Javascript,Html,Jquery,Svg,Load,我使用.load（）方法将HTML文件插入到包含SVG信息的页面中。但是，当我尝试访问导入的SVG文件中的元素时，我得到了“uncaughttypeerror:无法读取null的属性'addEventListener'” 这是index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8&qu

我使用.load（）方法将HTML文件插入到包含SVG信息的页面中。但是，当我尝试访问导入的SVG文件中的元素时，我得到了

“uncaughttypeerror:无法读取null的属性'addEventListener'”

这是index.html

    <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Party Packs</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="https://kit.fontawesome.com/c761a1adc3.js" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>

<body>
  <div id="insert-here"></div>

  <script src="js/anime.min.js" charset="utf-8"></script>
  <script src="js/index.js" charset="utf-8"></script>
</body>

</html>

如果我尝试

console.log（'#insert here'）

在index.js文件中，它只返回null。我在互联网上搜索过，我能找到的只是人们在加载html内容之前放置脚本的实例，但除非我遗漏了什么，否则这里就不是这样了。

谢谢。

加载是异步的。在收到响应并将其添加到DOM之前，您已经在DOM中搜索其结果。您需要传递回调，如下所示：
我可能遗漏了一些内容，但没有任何元素带有id=“transition main div”
我可以在任何地方看到？还有异步问题。和console.log（document.querySelector（'#insert here'）
对我来说非常好，它按预期记录
。和console.log（“#在此处插入”）
返回null，但输出#此处插入
，也与预期一样。它只是一个字符串，console.log（）不产生返回值。根据您提供的代码，除了回调/异步问题之外，您还需要$（'#insert here'）.load（'morph.html'）和控制台.log（document.querySelector（“#transmorph”）在回调中。这似乎是一个“我还没有喝咖啡”的问题，而不是其他任何问题；）
<svg id="transmorph" width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path class="transmorph" d="M1920 0V1C1547.5 -118 1557 5 1450.5 1C1344 -3 1307 1 1224.5 1C1142 1 1105 1 899.5 1C693.414 1 698.5 1 567 1C421.424 1 345 -11.5 222 1C123.6 11 162 -12 0 1V0H1920Z" fill="#1a1a1a" />
</svg>

$(function() {
  $('#transition-main-div').load('morph.html');
  console.log(document.querySelector('#insert-here'));
});

$('#transition-main-div').load('morph.html', function () {
    console.log(document.querySelector('#insert-here'));
});