Ejemplo de Escribir Con JavaScript
Uno de los usos comunes de JavaScript es escribir o modificar contenido en una página web. En este artículo, exploraremos las 3 diferentes maneras de escribir y actualizar contenido en una página utilizando JavaScript.
Contenido del artículo
Método 1: Escribir contenido con document.write()
El método document.write()
permite escribir contenido HTML directamente en una página web. Aunque es fácil de usar, ya no es recomendable, pues puede causar problemas si se usa después de que la página haya sido completamente cargada. Es la forma más sencilla y simple. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de escribir contenido con JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Hola, mundo!</h1>");
</script>
</body>
</html>
Método 2: Escribir contenido con innerHTML
El uso de la propiedad innerHTML
es una manera más flexible y recomendada de escribir o modificar contenido en una página web. Puedes seleccionar un elemento HTML específico y cambiar su contenido. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de escribir contenido con JavaScript</title>
</head>
<body>
<div id="miDiv"></div>
<script type="text/javascript">
document.getElementById("miDiv").innerHTML = "<h2>¡Hola, mundo!</h2>";
</script>
</body>
</html>
Método 3: Escribir contenido con textContent o innerText
Si solo deseas cambiar el contenido de texto de un elemento y no necesitas agregar etiquetas HTML, puedes usar las propiedades textContent
o innerText
. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de escribir contenido con JavaScript</title>
</head>
<body>
<p id="miParrafo"></p>
<script type="text/javascript">
document.getElementById("miParrafo").textContent = "¡Hola, mundo!";
// O usa innerText:
// document.getElementById("miParrafo").innerText = "¡Hola, mundo!";
</script>
</body>
</html>
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Escribir Con JavaScript.Ejemplo de. Recuperado el 27 de Septiembre de 2023 de https://www.ejemplode.com/24-javascript/95-ejemplo_de_escribir_con_javascript.html
Últimos 10 comentarios