JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
<div class="class-1 class-2" style="display: block">
  <p>
  some content
  </p>
  <p>
  some more content
  </p>
</div>
<button onclick="switchElement()">
  switch div to figure
</button>

CSS

div {
    background-color: red;
}

figure {
    background-color: yellow;
}

JavaScript

var $element;
var nodeName = 'figure';

$(function() {
  $element = $('div');
});


function switchElement() {
  $element.each(function (index, oldElement) {
    let $newElement = $('<' + nodeName + '/>');
    _.each($element[0].attributes, function(attribute) {
      $newElement.attr(attribute.name, attribute.value);
    });
    $element.wrapInner($newElement).children().first().unwrap();
  });
}