JSFiddle - React, Tailwind, and code Playground

HTML

<div id="html"></div>

CSS

div { border:1px solid black }

JavaScript

var items = [{
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child2",
  "name": "2 "
}, {
  "type": "child2",
  "name": "2"
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3"
}]
var child = "";
var html = document.getElementById('html');
var node;

items.forEach(function(item) {
  if (child !== item.type) {
    if (node) {
        html.appendChild(node);
    }
    node = document.createElement('div');
  }
    var newElem = document.createElement('div');
    newElem.innerHTML = item.name;
    node.appendChild(newElem);
    
  child = item.type;

});

html.appendChild(node);

//document.getElementById('html').appendChild(html);