I am trying to add html code from data-prototype
:
<div id="accordion" class="js-collection" data-prototype="<div class="card answer-section" id="__name__">
<div class="card-header" id="heading__name__">...</div></div>
<script>console.log('hi');">
</div>
As you can see, there is also some js
code.
When I try to add it with jquery
:
let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
let $root = $(el);
$root.append(template);
Everything works fine, I mean javascript code is executing.
But when I try to do it with vanilla js
:
let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
let wrapper = document.createElement('div');
wrapper.innerHTML = template;
el.insertBefore(wrapper.firstElementChild, document.getElementById('btn1'));
The js
code is not executing.
How can I make the same functionality as jQuery
append()
function in vanilla JS?
I have tried to analyze jquery code, but I cannot understand it