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);
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");
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()
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;