javascript中getElementById和createElement之间的差异

Difference between getElementById and createElement in javascript?

本文关键字：之间 createElement getElementById javascript      更新时间：2024-02-15

我几天来一直在使用javascript。我混淆了getElementById和createElement。

提前感谢

它们是两种不同的东西

getElementById使用DOM 中存在的元素id选择元素

但是

createElement创建一个可以插入DOM 的新元素

主要区别在于getElementById将通过其ID属性从DOM中获取元素，而createElement将创建一个全新的DOM元素。

假设您有一个包含以下HTML的页面：

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, World!</div>
    <div id="message">What a nice day!</div>
  </body>
</html>

然后你有一些JavaScript代码，比如：

document.getElementById("message")

您将检索具有"message"的id属性的<div>元素。

现在，假设您想在HTML页面中添加一个新元素，那么您可以使用createElement函数。

var newEl = document.createElement("div")

当然，在这个例子中，我们还将新元素存储在一个名为newEl的变量中。

现在，为了实际附加新元素，我们必须对任何DOM元素调用appendChild。为了简单起见，我们将简单地附加到<body>标记。

document.body.appendChild(newEl)

现在，你的页面应该（至少在浏览器的脑海中）是这样的：

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, World!</div>
    <div id="message">What a nice day!</div>
    <div></div>
  </body>
</html>
相关文章：