getElementByID、createElement、appendChild几个DHTML元素第2/2页

针对这几个DHTML元素，我们一个一个来详细讲解。

getElementByID

getElementByID 方法是用于通过 id 属性获取 HTML 元素的方法。它返回一个代表指定元素的对象。使用该方法时，需要在 HTML 元素上指定一个唯一的 id 属性，例如：

<div id="example"></div>

然后，在 JavaScript 中使用 getElementByID 来获取该元素：

const exampleElement = document.getElementById('example');

上述代码中，exampleElement 就是一个代表 id 为 example 的 DIV 元素的对象。

示例：

<div id="example"></div>
<button onclick="handleClick()">点击获取元素</button>

function handleClick() {
  const exampleElement = document.getElementById('example');
  console.log(exampleElement);
}

createElement

createElement 方法是用于创建新的 HTML 元素的方法。它接受一个参数，表示要创建的元素的标签名，例如：

const newElement = document.createElement('div');

上述代码中，newElement 就是一个代表新创建的 div 元素的对象。

接下来，可以使用其他方法（如 appendChild）将新元素添加到文档中。

示例：

<div id="container"></div>
<button onclick="handleClick()">点击添加元素</button>

function handleClick() {
  const containerElement = document.getElementById('container');
  const newElement = document.createElement('div');
  newElement.textContent = '新的元素';
  containerElement.appendChild(newElement);
}

上述代码中，点击按钮会在 id 为 container 的 DIV 元素内添加一个新的 div 元素，并给它添加了一些文本内容。

appendChild

appendChild 方法是用于将一个元素添加到另一个元素中的方法。它接受一个参数，表示要添加的元素。添加操作会将元素插入到父元素的最后一个子元素的位置。

示例：

<div id="container"></div>
<button onclick="handleClick()">点击添加元素</button>

function handleClick() {
  const containerElement = document.getElementById('container');
  const newElement = document.createElement('div');
  newElement.textContent = '新的元素';
  containerElement.appendChild(newElement);
}

上述代码中，点击按钮会在 id 为 container 的 DIV 元素内添加一个新的 div 元素，并给它添加了一些文本内容。

最后需要注意的是，以上三个方法都是在文档对象模型（DOM）中使用的方法，需要在网页中使用 JavaScript 代码来调用。