Quiero extraer el html de list1.html sin abrirlo y usarlo en list2.html, usando JavaScript o jQuery.
lista1.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 (Quiero hacer varios archivos como este)
<ul> <li class='getitem' id='getitem1'></li> <li class='getitem' id='getitem2'></li> <li class='getitem' id='getitem3'></li> </ul> ¿Hay alguna forma de mostrar los textos DATA 1, DATA 2, DATA 3, respectivamente, en #getitem1 , #getitem2 y #getitem3 ?
Esto es lo que tengo hasta ahora (no funciona)
guión.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);ACTUALIZAR
Decidí usar jQuery .load() . para cargar list1.html desde script.js.
lista2.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>guión.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);La forma en que lo hizo no es posible ya que el archivo de script se vuelve a cargar cuando navega al segundo archivo HTML. Por lo tanto, el valor de data1, data2 y data3 no está definido.
Para pasar datos, necesita un almacenamiento permanente como localStorage, sessionStorage, etc.
Se puede hacer de esta manera: -
script1.js vincula esto a 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 vincula esto a list1.html
document.getElementById("getitem1").innerText = localStorage.getItem("data1"); document.getElementById("getitem2").innerText = localStorage.getItem("data2"); document.getElementById("getitem3").innerText = localStorage.getItem("data3");Estás haciendo demasiado. La manera simple de hacer esto es
const data3 = document.getElementById('data3'); console.log(data3.textContent);Por supuesto, querrá tener un div o li para mostrarlo donde usé console.log()
Use innerHTML para obtener el contenido interno de HTML. Puede actualizar su archivo js para ponerlo en list2 respectivamente.
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;