未捕获的类型错误：无法读取 null 的属性（读取“appendChild”）；持续错误

Question

我的脚本标签位于我的正文标签的底部，这是我在这里找到的主要解决方案。还有其他原因导致appendChild 遇到此错误吗？

HTML：

     <section class="section-2">
       <p class="about-me-text"></p>
     </section>
     <script src="rScript.js"></script>
   </body>

JavaScript：

const aboutMeText = document.querySelector("about-me-text");
const aboutMeTextContent = 'I am a creative designer, who dabbles in both website 
creation & digital art design. Contact me to start a creative project or website 
today.'

Array.from(aboutMeTextContent).forEach(char => {
 const span = document.createElement("span");
 span.textContent = char;
 aboutMeText.appendChild(span);
})

Answer 1

您需要添加一个“。”当定位类名时使用 querySelector()。

const aboutMeText = document.querySelector(".about-me-text");
const aboutMeTextContent = `I am a creative designer, who dabbles in both website
  creation & digital art design. Contact me to start a creative project or website
  today.`

Array.from(aboutMeTextContent).forEach(char => {
  const span = document.createElement("span");
  span.textContent = char;
  aboutMeText.appendChild(span);
})

<section class="section-2">
  <p class="about-me-text"></p>
</section>

Answer 2

使用 querySelector 时，您必须明确要选择哪个元素，例如，在选择一个类时的问题中，您必须将 . 放在about-me-text 的开头。对于 ID，您将在开头添加 # 等。

const aboutMeText = document.querySelector(".about-me-text");
const aboutMeTextContent = 'I am a creative designer, who dabbles in both website creation & digital art design. Contact me to start a creative project or website today.'

Array.from(aboutMeTextContent).forEach(char => {
 const span = document.createElement("span");
 span.textContent = char;
 aboutMeText.appendChild(span);
})

<section class="section-2">
       <p class="about-me-text"></p>
     </section>
     <script src="rScript.js"></script>
   </body>