使用 XMLHttpRequest 在容器中创建容器

Question

我想使用 AJAX 在 div 容器中创建一个 div 容器，然后在内部容器中写入 "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-container 是在外部 div-container 中正确创建的，它的 ID是 'innerContainer'。但是在我尝试的时候在内部容器中写入 "Hello World" 是行不通的。相反，它的内容仍然是 'default text'。控制台输出："index.html:21 Uncaught TypeError: Cannot set property 'innerHTML' of null".

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

Answer 1

<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>

Answer 2

我已经尝试过我在评论中所说的方法并且有效。

当您在代码中运行 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 那么。

使用 XMLHttpRequest 在容器中创建容器

creating a container in a container with XMLHttpRequest

javascript

php

ajax

containers

getelementbyid