如何在 html 元素中加载外部 javascript function？

Question

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="...">

Answer 1

I'm trying to work out exactly what you mean. From what I can infer, you would like the code in sample.js to be applied to all elements that have a specific characteristic rather than purely executing the code.

For this you'll want to use the likes of element selectors eg

document.getElementByClassName(string);
document.getElementByTagName(string);
document.querySelectorAll(string);

More can be found here.

https://plainjs.com/javascript/selecting/

An example of using these would be:

 document.querySelectorAll("[data-sample-js]").forEach(elem => { elem.innerText += "This is a sample text"; });

 <div data-sample-js>Test</div>

Which will concatenate This is a sample text onto the content of any element with data-sample-js as an attribute.

Note that this code must be imported at the end to ensure that all elements are added to the DOM and loaded before the script takes place.

EDIT 1:

As mentioned in these comments, do not use document.write source

Instead, I recommend using a different method for loading this content. Stylesheets can be added by simply adding the <style> to the head of the page and for scripts use a dynamic loader. More information on <script> imports can be found here .

EDIT 2:

It appears you are trying to write frontend JavaScript code to dynamically generate a page. You should not do this and instead take care of this in the backend application that serves the page. This is fairly simple in most backend languages / frameworks (PHP can simply use require_once ).

Answer 2

Maybe this is what you trying to achieve.

Long story short:

var scriptTag = document.getElementsByTagName('script');
scriptTag = scriptTag[scriptTag.length - 1];
var parentTag = scriptTag.parentNode;
parentTag.innerHTML = 'This is a sample text to replace its content';
parentTag.classList.add('new_class');
parentTag.id = 'new_id';