HTML 代码错误分析及修复 - JavaScript 创建 input 元素并添加到页面

<!DOCTYPE html>
<html>
<head>
  <script>
    window.onload = function() {
      var cj = document.createElement('input');
      document.getElementById('outnode').appendChild(cj);
    };
  </script>
  <meta charset="UTF-8" />
  <title>HTML 代码错误分析及修复 - JavaScript 创建 input 元素并添加到页面</title>
  <style>
    span {
      width: 150px;
      height: 150px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div id="outnode">
    <span></span>
  </div>
</body>
</html>
<h2>找出代码中的错误内容：代码中有几个错误：</h2>
<ol>
<li>在 <code>window.onload</code> 函数中，缺少左括号 <code>{</code>，应该是：</li>
</ol>
<pre><code>window.onload = function() {
</code></pre>
<ol start="2">
<li>在创建 input 元素时，代码不完整，应该是：</li>
</ol>
<pre><code>var cj = document.createElement('input');
</code></pre>
<ol start="3">
<li>在创建 input 元素后，缺少添加元素的代码，例如：</li>
</ol>
<pre><code>document.getElementById('outnode').appendChild(cj);
</code></pre>
<ol start="4">
<li>在样式中，<code>width</code> 和 <code>height</code> 的单位应该是小写的 <code>px</code>，而不是大写的 <code>PX</code>。</li>
</ol>
<h2>正确的代码应该是这样的：</h2>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script&gt;
    window.onload = function() {
      var cj = document.createElement('input');
      document.getElementById('outnode').appendChild(cj);
    };
  &lt;/script&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;title&gt;title&lt;/title&gt;
  &lt;style&gt;
    span {
      width: 150px;
      height: 150px;
      background-color: aquamarine;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;outnode&quot;&gt;
    &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>