3

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="...">
lisdoa
  • 41
  • 4

2 Answers2

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

Hive7
  • 3,277
  • 2
  • 18
  • 37
  • This works good. But is there a way, that it will work when the script is placed anywhere on the page – lisdoa Nov 16 '19 at 10:20
  • 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 – Hive7 Nov 16 '19 at 10:54
  • 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') – lisdoa Nov 16 '19 at 12:48
  • 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 https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice. It isn't required that you put this at the bottom of your script or perform an onload but it is advised – Hive7 Nov 16 '19 at 14:06
  • I have used the `document.write` since it contains `script` and `style` elements. – lisdoa Nov 16 '19 at 14:55
  • Script and style elements can be dynamically created without the use of `document.write`. Take a look into this for scripts https://stackoverflow.com/questions/3248384/document-createelementscript-synchronously and you can use `document.createElement` for styles I believe (or just adding styles using `document.head.innerHTML += ...` – Hive7 Nov 16 '19 at 15:36
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202473/discussion-between-dfgdfh-and-hive7). – lisdoa Nov 16 '19 at 16:05
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';
Wan Chap
  • 531
  • 3
  • 11