How to use one JavaScript file for two HTML files?

Question

I want to extract the html from list1.html without opening it and use it in list2.html, using JavaScript or jQuery.
list1.html

<ul>
    <li class="listitem" id="data1">DATA 1</li>
    <li class="listitem" id="data2">DATA 2</li>
    <li class="listitem" id="data3">DATA 3</li>
</ul>

list2.html (I want to make multiple files like this)

<ul>
    <li class='getitem' id='getitem1'></li>
    <li class='getitem' id='getitem2'></li>
    <li class='getitem' id='getitem3'></li>
</ul>

Is there any way to show the texts DATA 1, DATA 2, DATA 3 , respectively, in #getitem1 , #getitem2, and #getitem3?
Here's what I have so far (Doesn't work)
script.js

data1 = document.getElementById('data1').innerText();
data2 = document.getElementById('data2').innerText();
data3 = document.getElementById('data3').innerText();

document.getElementById('getitem1').innerText(data1);
document.getElementById('getitem2').innerText(data2);
document.getElementById('getitem3').innerText(data3);

UPDATE

I decided to use jQuery .load(). to load list1.html from script.js.

list2.html

<div class="load"></div>
<ul>
    <li class='getitem' id='getitem1'></li>
    <li class='getitem' id='getitem2'></li>
    <li class='getitem' id='getitem3'></li>
</ul>

script.js

$('.load').load("list1.html ul");
data1 = document.getElementById('data1').innerText();
data2 = document.getElementById('data2').innerText();
data3 = document.getElementById('data3').innerText();

document.getElementById('getitem1').innerText(data1);
document.getElementById('getitem2').innerText(data2);
document.getElementById('getitem3').innerText(data3);

No-one should be using jQuery for new projects today. It's been irrelevant for 5-6 years now. — Dai, Jan 02 '22 at 05:41
Your variables aren't declared they should have 'let', 'var', or 'const' in front. The real issue though is probably when the script is running. Place it after the html in your page. — N-ate, Jan 02 '22 at 05:42
Using the sizzle selector engine from jquery is not a problem. Let him do DHTML his way and you can do it your way Dai. — N-ate, Jan 02 '22 at 05:43
I cant answer your question, but would suggest you use textContent instead of innertext. This will work const data3 = document.getElementById('data3'); console.log(data3.textContent); — Brad, Jan 02 '22 at 05:46
@N-ate jQuery has been a thin wrapper over `querySelector` for years. It offers zero value over the built-in DOM today and as a complex script it _necessarily_ introduces security risks, which is strong reason to avoid it because it isn't being actively maintained anymore; and there are plenty of other strong reasons to advocate _against_ using jQuery: https://stackoverflow.com/questions/5099949/what-are-some-empirical-technical-reasons-not-to-use-jquery https://youmightnotneedjquery.com/ https://blog.garstasio.com/you-dont-need-jquery/ — Dai, Jan 02 '22 at 05:50
You can send those information using query string if you want to pass variable between your page — BETOMBO, Jan 02 '22 at 05:51
Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — mo3n, Jan 02 '22 at 06:00

score 2 · Answer 1 · answered Jan 02 '22 at 05:58

The way you did is not possible as the script file is reloaded when you navigate to the second HTML file. Thus the value of data1, data2, and data3 is undefined.

To pass data, you need a permanent storage like localStorage, sessionStorage, etc..

It can be done in this way:-

script1.js link this to list1.html

localStorage.setItem("data1", document.getElementById("data1").innerText);
localStorage.setItem("data2", document.getElementById("data2").innerText);
localStorage.setItem("data3", document.getElementById("data3").innerText);

script2.js link this to list1.html

document.getElementById("getitem1").innerText = localStorage.getItem("data1");
document.getElementById("getitem2").innerText = localStorage.getItem("data2");
document.getElementById("getitem3").innerText = localStorage.getItem("data3");

Brad · Answer 2 · 2022-01-02T14:24:28.107

1

You are doing too much. The simple way of doing this is

const data3 = document.getElementById('data3');

console.log(data3.textContent);

Of course you will want to have a div, or or li to display it where I used console.log()

edited Jan 02 '22 at 14:24

answered Jan 02 '22 at 05:50

Brad

1,685
1
27
38

score 0 · Answer 3 · answered Jan 02 '22 at 05:52

Use innerHTML to get the HTML inner content. You can update your js file to put into list2 respectively.

var data1 = document.getElementById('data1').innerHTML;
var data2 = document.getElementById('data2').innerHTML;
var data3 = document.getElementById('data3').innerHTML;

document.getElementById('getitem1').innerHTML = data1;
document.getElementById('getitem2').innerHTML = data2;
document.getElementById('getitem3').innerHTML = data3;

score 0 · Answer 4 · answered Jan 02 '22 at 05:55

Put the script in an external JavaScript file.

use the src attribute in the tag to call the script.js file;

 <!DOCTYPE html>
 <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
       <script src=”script.js” language=”JavaScript” type=”text/javascript”></script>
    </head>
    <body>
    </body>
  </html>

How to use one JavaScript file for two HTML files?

4 Answers4