SO-39125117

by David Thomas

HTML

<div class="info-hold">
  <h2>Lorem</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 2</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 3</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>

CSS

.info-wrapper {
  border: 1px solid red;
}

JavaScript

function wrapAll(opts) {
  var settings = {
    'wrapFrom': null,
    'wrapTo': null,
    'wrapWith': 'div',
    'wrapClass': 'wrapper'
  };

  Object.keys(opts || {}).forEach(function(key) {
    settings[key] = opts[key];
  });

  if (!settings.wrapFrom || !settings.wrapTo) {
    return false;
  }

  var wrapper = document.createElement(settings.wrapWith),
    collection = [],
    classes = [];

  if ('string' === typeof settings.wrapClass) {
    classes = settings.wrapClass.split(/\s+/);
  } else if (settings.wrapClass instanceof Array) {
    classes = settings.wrapClass;
  }

  classes.forEach(function(cN) {
    wrapper.classList.add(cN.trim());
  });

  settings.wrapFrom.parentNode.insertBefore(wrapper, settings.wrapFrom.nextSibling);

  while (wrapper.nextSibling && (wrapper.nextSibling.nodeType !== 1 || (wrapper.nextSibling.nodeType === 1 && !wrapper.nextSibling.matches(settings.wrapTo)))) {
    wrapper.appendChild(wrapper.nextSibling);
  }

}

Array.from(document.querySelectorAll('h2')).forEach(function(heading) {
  wrapAll({
    'wrapFrom': heading,
    'wrapTo': 'h2',
    'wrapClass': 'info-wrapper'
  });
});