`document.createElement()` 和 `appendChild()` 在使用 VS 代码时没有给我预期的输出

问题描述 投票：0回答：2

我正在学习网络开发，刚开始学习DOM。现在我面临一个挑战，当我在 VScode 中使用 

document.createElement()
和 
appendChild()
时，它不起作用。但是当我直接在 Chrome 浏览器控制台上执行它时，它会按我预期的那样工作。我做错了什么吗？或者我可以只使用浏览器控制台编写这段代码并获得预期的结果吗？ 这是我的代码片段：

const newSpanElement = document.createElement("span");
newSpanElement.textContent = " Welcome!";
const mainHeading = document.getElementsByTagName("h1");
mainHeading.appendChild(newSpanElement);

和：

const newPara = document.createElement("p");
newPara.textContent = "You are a good person!";
document.body.appendChild(newPara);

当用 VS 代码编写时，上述方法都没有给我在浏览器中的预期输出，但是当直接在浏览器控制台中编写时，这两种方法都工作得很好。请问，这可能是什么原因？

非常感谢您的帮助！

注意： 我也用过

.innerHTML
、
.createTextNode()
，结果都是一样的

javascript html dom
2个回答
2
投票

在我看来，第二个代码是正确的：

const newPara = document.createElement("p");
newPara.textContent = "You are a good person!";
document.body.appendChild(newPara);

但是第一个不正确，因为

getElementsByTagName()
返回一个
HTMLCollection
对象，它没有
appendChild()
方法。所以，你需要访问第一个元素：

const newSpanElement = document.createElement("span");
newSpanElement.textContent = " Welcome!";
const mainHeading = document.getElementsByTagName("h1")[0];//<- adding `[0]`
mainHeading.appendChild(newSpanElement);
0
投票

为了让 dom 元素更好地使用 ids 和 

document.getElementById()
而不是标签或类，这是集合，可以有多个元素没有保证你得到所需的元素 所以我建议像这样更改您的代码：

<body>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const newSpanElement = document.createElement("span");
      newSpanElement.innerText = " Welcome!";
      const mainHeading = document.getElementById('mainHeading');
      mainHeading.appendChild(newSpanElement);
    });

  </script>
  <h1 id="mainHeading"><span>T</span></h1>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.