Изменение структуры генерируемой CMS разметки для сетки семантического UI

Question

Есть ли способ добавить div между строкой и разделителями столбцов без реинжиниринга всех стилей сетки? CMS Я пытаюсь интегрировать SUI со вставками нежелательного div, от которого я не могу избавиться. Новая структура выглядит следующим образом:

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

Проблема заключается в том, что SUI ожидает следующий DIV после грести быть DIV с классом столбца, и я не могу сделать это, к сожалению. Нужно ли мне модифицировать CSS семантической сетки для учета этого или есть какое-то волшебное исправление?

Любая помощь была бы принята с благодарностью.

Answer 1

Используйте условное выражение для объединения outerHTML и innerHTML нежелательного div. Например:

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>

Список литературы

• MutationObservers: innerHTML, outerHTML mutations

• The Web Platform Tests Project: Test Suites for Web Platform Specifications

• innerHTML and outerHTML to Get and Replace HTML content