Mostrar una variable de JavaScript en el cuerpo HTML
-
Use
innerHTMLpara mostrar la variable JavaScript en el cuerpo HTML -
Use la propiedad
document.write()para mostrar la variable JavaScript en el cuerpo HTML -
Use la propiedad
window.alertpara mostrar la variable JavaScript en el cuerpo HTML
A menudo es más fácil definir explícitamente una etiqueta de script y agregar el bloque de código para la salida necesaria en un cuerpo HTML. También usamos etiquetas script en la etiqueta head para cargar la cerca de código de JavaScript antes de la etiqueta body.
Cada convención tiene sus comentarios; Si necesitamos verificar si el código está libre de errores, podemos agregar funciones de JavaScript en la sección head para realizar la tarea. También podemos usar JavaScript en el elemento body para eventos de clic y otras características dinámicas.
Aquí, demostraremos cómo mostrar una variable de JavaScript en el cuerpo HTML y, específicamente, agregaremos nuestros bloques de código en el elemento body. Pero hay una diferencia entre pasar el valor en el cuerpo HTML y mostrar temporalmente un valor activado por las convenciones del código JavaScript.
Use innerHTML para mostrar la variable JavaScript en el cuerpo HTML
El uso de innerHTML obteniendo un id o class específico y pasando el valor de una variable es una de las formas más comunes de mostrar una variable de JavaScript en el cuerpo HTML.
Inicializaremos una etiqueta span en nuestro cuerpo HTML con un id = "input". Luego, la etiqueta script tendrá una variable enviada a ese id = "input" a través de la propiedad innerHTML. Esta manipulación DOM es conveniente cuando se colocan variables JavaScript en el cuerpo HTML.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<p> Hello! I'm <span id="input"></span>.</p>
<script>
document.getElementById('input').innerHTML = "Robert" ;
</script>
</body>
</html>
Producción:
Use la propiedad document.write() para mostrar la variable JavaScript en el cuerpo HTML
Aquí, el sistema para inicializar la propiedad document.write(parameter) se usa principalmente para probar variables. En este caso, el parámetro es la variable u objeto definido en JavaScript.
Declararemos la variable en una etiqueta script antes del segmento para mostrarla. Posteriormente, tendremos una etiqueta p, y dentro de ella, otra etiqueta script toma la iniciación del script superior.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script>
var input = "Gwen";
function doc(){
document.write(input);}
</script>
</head>
<body>
<p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>
Producción:
Use la propiedad window.alert para mostrar la variable JavaScript en el cuerpo HTML
Este es un proceso muy fácil para probar su variable a través de la manipulación DOM.
Definiremos un objeto o variable de JavaScript y almacenaremos un valor aleatorio aquí. Dentro de la etiqueta script, declararemos window.alert(variable), y esta propiedad generará un mensaje cuando active el objeto de la ventana.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
var input = "Hello! I'm Tom.";
window.alert(input);
</script>
</body>
</html>
Producción:
