原生js-动态批量创建html片段包含多个div内嵌

下面是一个示例代码，可以动态批量创建包含多个div内嵌的HTML片段：

// 定义一个数据数组，用于生成HTML
var data = [
  { title: 'Title 1', content: 'Content 1' },
  { title: 'Title 2', content: 'Content 2' },
  { title: 'Title 3', content: 'Content 3' }
];

// 创建一个空的HTML片段
var html = document.createDocumentFragment();

// 循环遍历数据数组，生成HTML代码
for (var i = 0; i < data.length; i++) {
  // 创建一个div元素
  var div = document.createElement('div');
  // 添加class属性
  div.className = 'box';
  // 创建一个h2元素，并设置标题内容
  var h2 = document.createElement('h2');
  h2.textContent = data[i].title;
  // 创建一个p元素，并设置内容
  var p = document.createElement('p');
  p.textContent = data[i].content;
  // 将h2和p元素添加到div元素中
  div.appendChild(h2);
  div.appendChild(p);
  // 将生成的div元素添加到HTML片段中
  html.appendChild(div);
}

// 将HTML片段插入到文档中
document.getElementById('container').appendChild(html);

在上面的代码中，我们首先定义了一个数据数组，包含了3个对象，每个对象有两个属性：title和content，分别代表标题和内容。

接着，我们创建了一个空的HTML片段，使用createDocumentFragment()函数创建。这个函数会创建一个空的文档片段，可以用于临时存储一些DOM元素，以减少对DOM的操作次数。

然后，我们使用一个循环遍历数据数组，生成HTML代码。在循环中，首先创建了一个div元素，并设置了class属性为box。然后，创建了一个h2元素，并设置了标题内容，创建了一个p元素，并设置了内容。最后，将h2和p元素添加到div元素中，并将生成的div元素添加到HTML片段中。

最后，我们将HTML片段插入到文档中，使用appendChild()函数将HTML片段添加到container元素中。

注意，由于我们使用了文档片段来存储生成的DOM元素，因此只有在最后一步将HTML片段插入到文档中时才会触发DOM的更新操作，这样可以减少对DOM的操作次数，提高性能。