JavaScript动态创建div等元素实例讲解

针对“JavaScript动态创建div等元素实例讲解”的完整攻略，我给出以下内容：

1. 动态创建元素

在 JavaScript 中，我们可以使用 document.createElement() 方法来动态创建元素。其语法格式如下：

var element = document.createElement(tagName);

其中，tagName 表示要创建的元素的标签名。例如，要创建一个 div 元素，可以使用以下代码：

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

2. 插入元素

创建元素之后，需要将其插入到指定的位置。可以使用以下方法：

2.1 appendChild()

使用 appendChild() 方法将元素插入到指定元素的子节点列表的末尾位置。

parentElement.appendChild(childElement);

其中，parentElement 表示要插入的父元素，childElement 表示要插入的子元素。

例如，插入一个 div 元素到 body 元素中：

var divElement = document.createElement('div');
document.body.appendChild(divElement);

2.2 insertBefore()

使用 insertBefore() 方法将元素插入到指定元素的前面。

parentElement.insertBefore(newElement, existingElement);

其中，parentElement 表示要插入的父元素，newElement 表示要插入的新元素，existingElement 表示已存在的元素，newElement 会被插入到 existingElement 的前面。

例如，插入一个 div 元素到 body 元素的第一个子元素前面：

var divElement = document.createElement('div');
var firstChildElement = document.body.firstElementChild;
document.body.insertBefore(divElement, firstChildElement);

3. 示例说明

下面是两个示例，演示如何使用 JavaScript 动态创建和插入元素。

3.1 示例1：动态创建一个表格

// 创建 <table> 元素
var tableElement = document.createElement('table');

// 创建表头
var theadElement = document.createElement('thead');
var trElement = document.createElement('tr');
var thElement1 = document.createElement('th');
var thElement2 = document.createElement('th');
var thElement3 = document.createElement('th');
thElement1.textContent = '姓名';
thElement2.textContent = '年龄';
thElement3.textContent = '性别';
trElement.appendChild(thElement1);
trElement.appendChild(thElement2);
trElement.appendChild(thElement3);
theadElement.appendChild(trElement);

// 创建表体
var tbodyElement = document.createElement('tbody');
for (var i = 0; i < 3; i++) {
  var trElement = document.createElement('tr');
  var tdElement1 = document.createElement('td');
  var tdElement2 = document.createElement('td');
  var tdElement3 = document.createElement('td');
  tdElement1.textContent = '学生' + i;
  tdElement2.textContent = Math.floor(Math.random() * 10 + 18);
  tdElement3.textContent = Math.random() > 0.5 ? '男' : '女';
  trElement.appendChild(tdElement1);
  trElement.appendChild(tdElement2);
  trElement.appendChild(tdElement3);
  tbodyElement.appendChild(trElement);
}

// 将表头和表体添加到表格中
tableElement.appendChild(theadElement);
tableElement.appendChild(tbodyElement);

// 将表格添加到页面中
document.body.appendChild(tableElement);

3.2 示例2：动态创建一个图片轮播

// 创建图片数组
var imageUrls = [
  'https://picsum.photos/seed/picsum/600/400',
  'https://picsum.photos/seed/picsum/700/400',
  'https://picsum.photos/seed/picsum/500/400'
];

// 创建轮播容器
var containerElement = document.createElement('div');
containerElement.style.width = '600px';
containerElement.style.height = '400px';
containerElement.style.overflow = 'hidden';

// 创建图片列表容器
var listElement = document.createElement('ul');
listElement.style.width = imageUrls.length * 600 + 'px';
listElement.style.height = '400px';
listElement.style.listStyle = 'none';
listElement.style.margin = '0';
listElement.style.padding = '0';

// 创建图片列表项
for (var i = 0; i < imageUrls.length; i++) {
  var itemElement = document.createElement('li');
  itemElement.style.float = 'left';
  itemElement.style.width = '600px';
  itemElement.style.height = '400px';

  var imgElement = document.createElement('img');
  imgElement.style.width = '100%';
  imgElement.style.height = '100%';
  imgElement.src = imageUrls[i];

  itemElement.appendChild(imgElement);
  listElement.appendChild(itemElement);
}

// 将图片列表添加到轮播容器中
containerElement.appendChild(listElement);

// 将轮播容器添加到页面中
document.body.appendChild(containerElement);

// 定时切换图片
var index = 0;
setInterval(function() {
  index++;
  if (index >= imageUrls.length) {
    index = 0;
  }
  var left = -index * 600;
  listElement.style.left = left + 'px';
}, 2000);

以上是动态创建元素的操作方法以及两个实例，希望可以对你有所帮助。