js创建元素（节点）示例

下面是关于JS创建元素（节点）示例的完整攻略。

1. 获取元素的父元素

在JS创建元素之前，首先要获取其父元素，即要将新创建的元素添加到哪个元素中。可以通过getElementById()方法获取父元素的引用。比如：

let parent = document.getElementById('parent');

其中，parent为获取到的父元素。

2. 创建元素并设置属性

创建元素可以使用createElement()方法，它接受一个参数表示要创建的元素的标签名。比如要创建一个div元素，可以这样写：

let divElement = document.createElement('div');

接着，可以对该元素设置一些属性，比如id、class、样式等，示例：

divElement.id = 'new-div';
divElement.className = 'new-class';
divElement.style.width = '100px';
divElement.style.height = '100px';
divElement.style.backgroundColor = '#f00';

3. 添加元素到父元素中

将新创建的元素添加到父元素中，可以使用父元素的appendChild()方法，示例：

parent.appendChild(divElement);

其中，parent为父元素，divElement为新创建的div元素。

示例说明1：动态创建并添加图片

// 获取父元素
let parent = document.getElementById('parent');

// 创建img元素并设置属性
let imgElement = document.createElement('img');
imgElement.src = 'https://picsum.photos/200';
imgElement.alt = '图片';

// 将img元素添加到父元素中
parent.appendChild(imgElement);

上面的代码，动态创建了一个img元素，并设置了它的src和alt属性，最后将它添加到了父元素中。

示例说明2：添加多个子元素

// 获取父元素
let parent = document.getElementById('parent');

// 创建多个div元素并设置属性
for (let i = 0; i < 3; i++) {
  let divElement = document.createElement('div');
  divElement.id = `new-div-${i}`;
  divElement.className = 'new-class';
  divElement.style.width = '100px';
  divElement.style.height = '100px';
  divElement.style.backgroundColor = `rgb(${i * 50}, ${i * 30}, ${i * 10})`;

  // 将div元素添加到父元素中
  parent.appendChild(divElement);
}

上面的代码，通过一个循环，创建了三个div元素，并设置了它们的id、class、样式等属性，最后将它们添加到了父元素中。