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; }