JS 创建元素|极客笔记

JS 创建元素

在前端开发中，经常会遇到动态创建元素的需求。使用JavaScript可以很方便地实现在网页上动态创建元素并添加到指定位置。

使用 document.createElement 方法创建元素

在JavaScript中，可以使用 document.createElement() 方法来创建元素。该方法会根据传入的参数创建一个相应的元素节点。

// 创建一个新的 <div> 元素
const newDiv = document.createElement('div');

// 设置新元素的一些属性
newDiv.className = 'box';
newDiv.id = 'newBox';
newDiv.textContent = 'This is a new box element';

// 将新创建的元素添加到指定位置
document.body.appendChild(newDiv);

上面的代码演示了如何使用 document.createElement 方法创建一个新的 div 元素，并设置其属性，然后将其添加到 body 元素下。

创建带有子元素的元素

除了创建单个元素外，还可以创建带有子元素的元素。可以通过创建子元素并将其添加到父元素中来实现这一点。

// 创建一个包含子元素的 <div> 元素
const parentDiv = document.createElement('div');
parentDiv.className = 'parentBox';

// 创建子元素 <p> 元素
const childP = document.createElement('p');
childP.textContent = 'This is a child paragraph element';

// 将子元素添加到父元素中
parentDiv.appendChild(childP);

// 将包含子元素的父元素添加到 body 中
document.body.appendChild(parentDiv);

上面的代码演示了如何创建一个包含子元素的 div 元素，并将子元素 p 添加到其中，然后将父元素添加到 body 中。

创建并插入元素

除了将创建的元素直接添加到指定位置外，还可以通过 insertBefore 方法将元素插入到指定位置。

// 创建一个新的 <span> 元素
const newSpan = document.createElement('span');
newSpan.textContent = 'This is a new span element';

// 找到参考节点
const referenceElement = document.getElementById('referenceElement');

// 将新元素插入到参考节点之前
document.body.insertBefore(newSpan, referenceElement);

上面的代码演示了如何创建一个新的 span 元素，并将其插入到具有特定 id 的参考元素之前。

示例代码

下面是一个完整的示例代码，演示了如何使用 JavaScript 动态创建元素并将其添加到页面中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Element Creation</title>
</head>
<body>

<h1>Dynamic Element Creation Example</h1>

<script>
  // 创建一个新的 <button> 元素
  const newButton = document.createElement('button');
  newButton.textContent = 'Click me';

  // 添加按钮点击事件
  newButton.addEventListener('click', function() {
    alert('Button clicked!');
  });

  // 将按钮添加到 body 中
  document.body.appendChild(newButton);
</script>

</body>
</html>

在这个示例中，创建了一个新的 button 元素，并为其添加了点击事件，点击按钮后会弹出一个提示框。