Modifying structure of CMS generated markup for Semantic UI grid

Question

Is there a way to add a div in between the row and the column divs without reengineering the whole grid styles? The CMS I'm trying to integrate SUI with inserts an unwanted div that I can't get rid of. The new structure looks like this:

<div class="ui grid">
  <div class="row">
    <div class="UNWANTED DIV">
      <div class="column">
      </div>
      <div class="column">
      </div>
    </div>
 </div>
</div>

The problem is that SUI expects the next div after to row to be a div with class column and I can't do that unfortunately. Do I have to modify the semantic grid CSS to account for this or is there some magic fix?

Any help would be greatly appreciated.

Paul Sweatte · Answer 1 · 2017-02-22T04:36:36.310

Use a conditional statement to merge the outerHTML and innerHTML of the unwanted div. For example:

var foo = document.querySelector(".row > div");
if(foo.className === "UNWANTED DIV")
  {
  foo.outerHTML = foo.innerHTML;
  }

console.log(document.body.innerHTML);

.row > .column { border: 1px solid red; }

<div class="ui grid">
  <div class="row">
    <div class="UNWANTED DIV">
      <div class="column">
      </div>
      <div class="column">
      </div>
    </div>
 </div>
</div>

References

Modifying structure of CMS generated markup for Semantic UI grid

1 Answers1