¿Alcohol o gasolina?

Utilicé el ejercicio para practicar un poco los elementos de HTML creados desde Javascript, por este motivo se hicieron muchas líneas.

<script>
// Elementos de ayuda visual
var saltoLinea = document.createElement("br");

//Crea contenedor div y asignar atributos.
var contenedor = document.createElement("div");
contenedor.setAttribute("align", "justify");

// Crea elemento pregunta como un h3 y su contenido
var pregunta = document.createElement("h3");
var tPregunta = document.createTextNode("¿Alcohol o gasolina?");
pregunta.appendChild(tPregunta);

// Crea elemento parrafo con su contenido
var problema = document.createElement("p");
var tProblema = document.createTextNode(
  "Problema: Si un carro tiene un tanque de 40 litros. Usando gasolina y consumiendo todo el tanque se hace un recorrido de 480 kilómetros. ¿Cuál es la eficiencia del carro usando gasolina? o sea, ¿cuántos kilómetros recorre el carro por cada litro de gasolina? Para calcular la eficiencia: divide la distancia recorrida entre la cantidad de litros gastados. Imprime el valor utilizando document.write. Organiza las cuentas en variables. Por otro lado, si el carro usa alcohol como combustible, el mismo tanque de 40 litros hace un recorrido de 300 kilómetros. ¿Cuál es el la eficiencia del carro usando alcohol?"
);
problema.appendChild(tProblema);

// Crea elemento h4 cabecera
var cabecera = document.createElement("h4");
var tCabecera = document.createTextNode("Litros  Gasolina  Alcohol");
cabecera.appendChild(tCabecera);

// Crea elemento h4 palabra gasolina
var litros = document.createElement("input");
litros.setAttribute("value", "40");
litros.setAttribute("size", "5");

// Crea elemento h4 encabezado
var lineaGas = document.createElement("h4");
var tLineaGas = document.createTextNode("Gasolina vs Alcohol");
lineaGas.appendChild(tLineaGas);

// Valores en kilometros recorridos editables
var kilGas = document.createElement("input");
kilGas.setAttribute("value", "400");
kilGas.setAttribute("size", "7");
var kilAlc = document.createElement("input");
kilAlc.setAttribute("value", "300");
kilAlc.setAttribute("size", "7");

// Crea elemento h4 encabezado
var lineaEfi = document.createElement("h4");
var tLineaEfi = document.createTextNode("Eficiencia");
lineaEfi.appendChild(tLineaEfi);

// Crea elemento resultado1 resultado2
var resultado1 = document.createElement("h4");
var tEfiGas = document.createTextNode("-> Gasolina: ");
var efiGas = document.createTextNode(kilGas.value / litros.value);
var kGas = document.createTextNode(" km por litro.");
resultado1.appendChild(tEfiGas);
resultado1.appendChild(efiGas);
resultado1.appendChild(kGas);

var resultado2 = document.createElement("h4");
var tEfiAlc = document.createTextNode(" -> Alcohol: ");
var efiAlc = document.createTextNode(kilAlc.value / litros.value);
var kAlc = document.createTextNode(" km por litro.");
resultado2.appendChild(tEfiAlc);
resultado2.appendChild(efiAlc);
resultado2.appendChild(kAlc);

// Agrega los elementos al cuerpo html
contenedor.appendChild(pregunta);
contenedor.appendChild(problema);
contenedor.appendChild(cabecera);
contenedor.appendChild(litros);
contenedor.appendChild(lineaGas);
contenedor.appendChild(kilGas);
contenedor.appendChild(saltoLinea);
contenedor.appendChild(kilAlc);
contenedor.appendChild(saltoLinea);
contenedor.appendChild(lineaEfi);
contenedor.appendChild(resultado1);
contenedor.appendChild(resultado2);
document.body.appendChild(contenedor);
</script>

No logré que se actualizara correctamente de forma que al cambiar el valor dentro de los input se actualizaran los cálculos de forma automática dentro del DOM. Aún así volví a recordar muchos conceptos y fué de mucha utilidad!

Por cierto en la parte de resultado1 y resultado2 se pudo utilizar:

document.write("-> Alcohol: " + kilGas.value / litros.value + " km por litro.");
document.write("<br>");
document.write("-> Alcohol: " + kilAlc.value / litros.value + " km por litro.");

El problema es que de esta forma no sabía como utilizar negrita y otros atributos, además de que document.write escribe en todo el documento entonces me sobrescribe el div y no supe como hacerlo para combinar ambas formas.

Acá se puede ver el resultado directamente: https://gbu21f.csb.app