Question

我不知道，但这个问题可能是最简单的所有答案，但我无法理解。

我基本上想要复制一个简单的HTML代码

<p></p>

使用Javascript。如果我在html中简单地写<p></p>，那么我得到以下渲染元素：

<html><head></head><body><p></p></body></html>

我创建了一个html文件，并在其中编写了以下代码。

<script>
    var para = document.createElement('p');
</script>

我在浏览器中渲染了这个文件，发现正在渲染以下元素。

<html>
    <head>
        <script>
            var para = document.createElement('p');
        </script>
    </head>
    <body></body>
</html>

显然我的元素没有创建。我的猜测是我没有指定任何父级，所以它没有创建它。因为body是一个默认的DOM元素，所以我想到了获取body dom元素并将para作为子项附加到它上面，所以我编写了以下代码：

<script>
    var body = document.getElementsByTagName('body')[0];
    var para = document.createElement('p');

    body.appendChild(para);
</script>

但我仍然没有得到它的工作。呈现以下内容：

<html>
    <head>
        <script>
            var body = document.getElementsByTagName('body')[0];
            var para = document.createElement('p');

            body.appendChild(para);
        </script>
    </head>
<body>
</body>
</html>

我得到了一个未捕获的TypeError：无法读取未定义的属性'appendChild'，这告诉我变量体的值为undefined，但为什么它们的无体元素依据去JS？ DOM元素的基本内容是什么以及它们在渲染时是如何创建的，我需要了解它背后的基本原理。

Answer 1

如上所述，有一个document.body来访问正文，但代码是在body标签出现之前执行的，这是主要问题。 Javascript不像那样以css执行。

试试这个：

<html>
    <head>
        
    </head>
<body>
  
  <script>
      var body = document.body;
      var para = document.createElement('p');
      para.textContent = "Hello";
      body.appendChild(para);
  </script>
</body>
</html>

为什么一个简单的createElement命令不能与JS一起工作并在HTML DOM中创建一个元素

1 个答案: