write js variable to specific html

Question

I'm trying to write js variable (tab.url.toString()) to html. I've tried to do this:

document.write(tab.url.toString())

but it's a part of a big js code and only this is related to html.

The html is called history.html and I wrote there:

<script src="nameFile.js"></script>

how can I connect between the js code and this specific html file?

Thanks.

Answer 1

You can try and grab the element by its id in your Javascript file

someId = document.getElementById('someId')

Then you append the value to it by

let val = tab.url.toString()
someId.innerHTML = val

Answer 2

Create variable on the global window object

You can create a property on the window object, something like this:

window.tabUrl = tab.url.toString();

This variable is globally accessable by every script that comes after its execution.
As long as you always write the full name window.tabUrl it will be available from anywhere.

You can use that value now in other scripts. Just as an example:

document.getElementById('exampleId').innerHTML = window.tabUrl;

Documentation for innerHTML:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Using global variables on the window object should not be used too much, but it is an easy solution to transfer values for your personal projects.