En este artículo, aprenderemos cómo cargar un archivo HTML externo en un elemento div .
Las siguientes funciones de jQuery se utilizan en los códigos de ejemplo.
- ready(): El evento ready ocurre cuando se ha cargado el DOM (modelo de objeto de documento).
- load(): El método load() carga datos de un servidor y obtiene los datos devueltos en el elemento seleccionado.
Nota: Usaremos la función ready() para asegurarnos de que nuestro DOM esté completamente listo antes de realizar más tareas. Cargaremos el HTML externo usando la función load() .
Acercarse:
- Primero, crearemos nuestro archivo HTML externo.
- Agregue un elemento div en el archivo HTML donde queremos cargar HTML externo.
- Bajo el script, use la función ready() para verificar si DOM está listo.
- Luego seleccione el elemento div en el que queremos cargar HTML usando load().
Archivos externos: los siguientes archivos div-1.html y div-2.html se utilizan como archivos externos.
div-1.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>div-1</title> </head> <body> <p>This content is from first div.</p> </body> </html>
div-2.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>div 2</title> </head> <body> <p>This is content from second div</p> </body> </html>
Código HTML: el siguiente código demuestra la carga de archivos externos en un div HTML .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- Some CSS -->
<style>
div {
border: 2px solid green;
width: fit-content;
margin: 20px auto;
padding: 2px 20px;
cursor: pointer;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<!-- First div -->
<div id="div-1">
First Div
<p>Click to load first html</p>
</div>
<!-- Second div -->
<div id="div-2">
Second div
<p>Click to load first html</p>
</div>
<!-- Script -->
<script>
// Check if file is completely ready
$(document).ready(function () {
// Adding click event on id div-1
// if it clicked then anonymous
// function will be called
$('#div-1').click(function () {
// Load the exertnal html
// here this refers to
// current selector
$(this).load('div-1.html');
});
// Same as above
$('#div-2').click(function () {
$(this).load('div-2.html');
});
});
</script>
</body>
</html>
Producción:
Nota: estamos usando la función jQuery click() , lo que significa que el archivo externo se cargará después de hacer clic en él. Pero si desea cargar archivos externos justo después de que DOM esté listo, simplemente omita el evento click() y llame a la función load()
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA