DOM mutations example
<p>
<ch5-button sendEventOnClick="trigger_1" label="Update HTML"></ch5-button>
<ch5-button sendEventOnClick="trigger_2" label="Reset"></ch5-button>
</p>
<div class="b-red" data-ch5-innerhtml="data_ch5_innerhtml_signal_1">
</div>
<div id="mutations-parent" style="margin-top: 68px;">
<p><strong>DOM mutations example</strong></p>
<p>
<ch5-button id="add" label="Add new el with data-ch5-innerhtml attr"></ch5-button>
</p>
<p>
<ch5-button id="update" label="Update data-ch5-innerhtml attr"></ch5-button>
</p>
<p>
<ch5-button id="remove" label="Remove el with data-ch5-innerhtml attr"></ch5-button>
</p>
</div>
(function($, CrComLib){
const mutationsParentEl = $('#mutations-parent')[0];
const addBtn = $('#add')[0];
const updateBtn = $('#update')[0];
const removeBtn = $('#remove')[0];
addBtn.addEventListener('click', () => {
const divWithInnerhtmlCustomAttr = document.createElement('div');
divWithInnerhtmlCustomAttr.classList.add('b-red');
divWithInnerhtmlCustomAttr.setAttribute('id', 'new-el');
divWithInnerhtmlCustomAttr.setAttribute('debug', '');
divWithInnerhtmlCustomAttr.setAttribute('data-ch5-innerhtml', 'data_ch5_innerhtml_signal_2');
if (mutationsParentEl.querySelector('#new-el') === null) {
mutationsParentEl.appendChild(divWithInnerhtmlCustomAttr);
}
});
updateBtn.addEventListener('click', () => {
const divWithInnerhtmlCustomAttr = $('#new-el')[0];
if (divWithInnerhtmlCustomAttr) {
divWithInnerhtmlCustomAttr.setAttribute('data-ch5-innerhtml', 'data_ch5_innerhtml_signal_3');
}
});
removeBtn.addEventListener('click', () => {
const divWithInnerhtmlCustomAttr = $('#new-el')[0];
if (divWithInnerhtmlCustomAttr) {
mutationsParentEl.removeChild(divWithInnerhtmlCustomAttr);
}
});
})(jQuery,CrComLib);
.b-red{
border:3px solid red;
}
.c-blue{
color: blue;
}
.c-green {
color: green;
}