Question

使用 XMLHttpRequest 在容器中创建容器

2020-04-15

129

javascript php ajax containers getelementbyid

我想使用 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 容器在外部 div 容器内正确创建，并且它的 ID 是“innerContainer”。但是，我尝试在内部容器中写入“Hello World”却不起作用。相反，它的内容仍然是“默认文本”。控制台输出：“index.html:21 Uncaught TypeError: 无法设置 null 的属性‘innerHTML’”。

我将非常感激任何建议或帮助。

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

Answer 2

529046199

Shubham

2020-04-15