How do I load an external javascript function in an html element?

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

Hive7 · Accepted Answer · 2019-11-16 17:35:23Z

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 e.g.

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).

edited Nov 16, 2019 at 17:35

answered Nov 16, 2019 at 9:39

Hive7

3,6952 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

lisdoa Over a year ago

This works good. But is there a way, that it will work when the script is placed anywhere on the page

Hive7 Over a year ago

The script could be imported anywhere but make sure it’s wrapped in an onload to ensure that the page is fully loaded before it performs the actions

lisdoa Over a year ago

I am just asking, if it possible to add js file on top instead on below. Since i use document.write all html codes already present on the page will get removed when i use window.addEventListener('DOMContentLoaded')

Hive7 Over a year ago

Generally speaking, do not use document.write. It's very bad practice so try to use something such as .innerText or .innerHTML for editing the content of the elements on your page. See this for reference stackoverflow.com/questions/802854/…. It isn't required that you put this at the bottom of your script or perform an onload but it is advised

lisdoa Over a year ago

I have used the document.write since it contains script and style elements.

|

Wan Chap · Accepted Answer · 2019-11-16 09:46:47Z

0

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

edited Nov 16, 2019 at 9:46

answered Nov 16, 2019 at 9:39

Wan Chap

9618 silver badges14 bronze badges

Collectives™ on Stack Overflow

How do I load an external javascript function in an html element?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related