I have a sample.js
file which contains
document.write('<script>........</script><a>...</a><style>....</style>');
And I have this script <script src="https://example.com/sample.js"></script>
in external website. Where-ever I use this script, sample.js
is loaded immediately. And all other elements are not removed even though I use document.write
I want to load the above script in multiple Html <div>
or other elements, where we define something like id="example"
or class="example"
or data-sample-js
So how do I modify the sample.js
file to achieve this.
So far, I have tried in the sample.js
:
window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll("[data-sample-js]").forEach(elem => {
elem.innerHTML = document.write('<script>...</script><a>...</a><style>...</style>');
});});
So where-ever we place the <script src="https://example.com/sample.js"></script>
along with <div data-sample-js></div>
the javascript is loaded but it will remove all other html elements in the page.
EDIT:
There is a full html document is placed in the document.write().
It can have multiple scripts, styles, metas and all other possible codes.
that will be present in a static html webpage, including <script src="...">