使用 XMLHttpRequest 在容器中创建容器答案

【问题标题】：creating a container in a container with XMLHttpRequest使用 XMLHttpRequest 在容器中创建容器
【发布时间】：2020-04-15 12:43:31
【问题描述】：

我想使用 AJAX 在 div-container 中创建一个 div-container，然后在内部容器中写入“Hello World”。外容器没有特殊功能。它只是容纳内部容器。这是我的代码：

inex.html：

<!DOCTYPE html>
<html>

    <head><meta charset="UTF-8"></head>

    <body>

        <div id="outerContainer"></div>        // this is my outer container

        <script>
            function request(){
                var req = new XMLHttpRequest();
                req.open("get", "response.php", true);
                req.onreadystatechange=function(){
                    if(this.readyState == 4 && this.status == 200)
                        document.getElementById('outerContainer').innerHTML = this.responseText; 
                };
                req.send();
            }            
            request();

            // write "Hello World" in the inner container
            document.getElementById('innerContainer').innerHTML = "Hello World";
        </script>

    </body>

</html>

response.php

<?php
echo "<div id='innerContainer'>default text</div>";      // put this container inside the outer container
?>

运行程序后，我可以在 DOM 中看到内部 div 容器在外部 div 容器中正确创建，并且它的 ID 是“innerContainer”。但是我尝试在内部容器中写“Hello World”是行不通的。相反，它的内容仍然是“默认文本”。控制台输出：“index.html:21 Uncaught TypeError: Cannot set property 'innerHTML' of null”。

如果有任何建议或帮助，我将不胜感激。

【问题讨论】：

我认为在运行脚本时，innerContainer 不存在。请记住，您正在发出异步请求。尝试将 document.getElementById('innerContainer').innerHTML = "Hello World"; 放在 if 语句 if(this.readyState == 4 && this.status == 200) 中，这样它只会在生成 innerContainer div 后执行。

标签： javascript php ajax containers getelementbyid

【解决方案1】：

我已经尝试了我在评论中所说的内容，并且有效。

当您在代码中运行 document.getElementById('innerContainer').innerHTML = "Hello World"; 时，该元素可能不存在（因此出现“null”错误）。您必须记住您正在发出异步请求。因此，代码的其他部分将在发出请求时执行。

一种解决方案是在响应中移动“hello text”。所以这行得通：

<!DOCTYPE html>
<html>

    <head><meta charset="UTF-8"></head>

    <body>

        <div id="outerContainer"></div>

        <script>
            function request(){
                var req = new XMLHttpRequest();
                req.open("get", "random.php", true);
                req.onreadystatechange=function(){
                    if(this.readyState == 4 && this.status == 200)
                        document.getElementById('outerContainer').innerHTML = this.responseText;

                        document.getElementById('innerContainer').innerHTML = "Hello World";
                };
                req.send();
            }
            request();

        </script>

    </body>

</html>

如您所见，只有元素实际存在时才会插入 Hello World。那就不可能有一个不存在的 div。

【讨论】：

如果你觉得它有用，那么请点赞/接受它哈哈 - 我真的很想赏金我自己的问题之一！
我这样做了。再次感谢您的帮助。

【解决方案2】：

<head><meta charset="UTF-8"></head>

<body>

    <div id="outerContainer"></div>        // this is my outer container

    <script>
        function request(){
            var req = new XMLHttpRequest();
            req.open("get", "response.php", true);
            req.onreadystatechange=function(){
              if(this.readyState == 4 && this.status == 200)
                  document.getElementById('outerContainer').innerHTML = this.responseText; 

                  // write "Hello World" in the inner container
                  document.getElementById('innerContainer').innerHTML = "Hello World";
              };
            req.send();
        }            
        request();


    </script>

</body>

【讨论】：

谢谢你，舒巴姆。
不客气，如果你觉得这有帮助，请考虑放弃投票:)