Agregaré elementos dinámicamente a mi index.html principal usando .innerHTML += "<p>example</p>"; Sin embargo, no quiero almacenar la cadena grande similar a html en este archivo .js , sino importarla desde otro archivo example.html
ejemplo.html:
<p>example</p>
(Es solo un fragmento de código y no un archivo html independiente, pero quiero mantener la extensión .html para la eliminación de pelusas, el autocompletado y la legibilidad general)
Mis intentos:
$(...).load('example.html') : no funcionó ya que reemplaza el contenido de ... con este ejemplo en lugar de agregarlo
import * from example.html : este y otros intentos de importar archivos fallaron debido a un error MIME que indica que no se puede importar texto/html
Estaré perfectamente satisfecho con una solución de un método que lea .html como texto y lo devuelva como una cadena (preferiblemente sin usar AJAX o ES6 ya que no me siento seguro con ellos). Entonces solo usaría la cadena en .innerHTML += imported_string; y llámalo un día.
Si entiendo correctamente lo que quiere hacer, puede usar FileReader para importar el contenido de un archivo y convertirlo en texto, por ejemplo:
function readFile(event) { var file = event.target.files[0]; var stream = new FileReader(); stream.onload = function(e) { var fileContent = e.target.result; alert(fileContent); } stream.readAsText(file); } document.getElementById('myFile').addEventListener('change', readFile, false); <input type="file" accept="html" id="myFile">La entrada del archivo es para fines de presentación, puede adaptarla fácilmente a sus necesidades.
También debe realizar las comprobaciones habituales, que omití por motivos de brevedad.
Cree una solicitud de fetch para el archivo que desea recuperar. Esto es, en un sentido básico, la misma forma en que un navegador solicitaría un archivo html del servidor.
La siguiente función envía una solicitud basada en lo que ingresa como file . Por ejemplo, 'example.html' . Luego verifica si la solicitud fue exitosa y devuelve la respuesta como una cadena. Luego, la cadena se puede agregar a su innerHTML .
const getFileAsText = async file => { const response = await fetch(file); if (!response.ok) { throw new Error(`Fetching the HTML file went wrong - ${response.statusText}`); } return response.text(); };Puede usarlo como en el ejemplo a continuación.
getFileAsText('example.html').then(html => { document.body.innerHTML += html; });