Así que estoy haciendo un archivo javascript que usa un bucle para hacer las tablas de multiplicar del 1 al 12, pero uso css para hacer que cualquier elemento con la clase de horario flote hacia la derecha. Sin embargo, los divs que separan cada horario y tienen una clase de horario no tienen hijos. Estoy tratando de hacer que los elementos p que contienen un horario sean los hijos de los divs. Aquí está mi código:
var math = document.getElementById("maths"); for (var num = 1; num <= 12; num++) { math.innerHTML += "<div class=\"timetable\">"; for (var currentMath = 1; currentMath <= 12; currentMath++) { math.innerHTML += "<p>" + num + " x " + currentMath + " = " + (num * currentMath) + " </p>"; } math.innerHTML += "</div>"; }HTML esperado:
<div class="timetable"><p>1 x 1 = 1</p>....</div>
HTML:
<div class="timetable"></div><p>1x1 = 1</p>...
¿Alguien puede ayudarme?
P: ¿Por qué innerHTML actúa de forma extraña?
R: Porque estás haciendo cosas raras con él.
Su problema es que está tratando de asignar elementos no cerrados a innerHTML . Las cadenas que asigne aquí siempre deben estar completas , porque cualquier cadena que asigne se analizará en HTML real y válido. Esto significa que de la forma en que está haciendo las cosas, el navegador cerrará el div no cerrado por usted:
math.innerHTML += "<div class=\"timetable\">"; hará que el navegador cierre el div por usted:
<div class="timetable"></div> Después de eso, agrega <p>....whatever...</p> a innerHTML repetidamente en un bucle, lo que resulta en este innerHTML :
<div class="timetable"></div> <p>....whatever...</p> <p>....whatever...</p> <p>....whatever...</p> Como puede ver, los elementos p no son elementos secundarios de div.timetable .
Para solucionar su problema, simplemente cree su cadena antes de asignarla (y use literales de plantilla para hacerlo):
const math = document.getElementById("maths"); let html = ''; for (let num = 1; num <= 12; num++) { html += `<div class="timetable">`; for (let currentMath = 1; currentMath <= 12; currentMath++) { html += `<p>${num} x ${currentMath} = ${num * currentMath}</p>`; } html += "</div>"; } math.innerHTML = html; <div id="maths"></div> Además, no use más var en 2022, use const como predeterminado y use let si sabe que tendrá que asignar repetidamente a la variable. var solo debe usarse si necesita explícitamente el comportamiento de alcance específico que tiene.
Cree un elemento HTML usando document.createElement() y agregue los elementos secundarios (que se considera una buena práctica) en lugar de asignarlo como una cadena.
Con la ayuda de appendChild() , puede agregar un elemento secundario al principal.
Ejemplo de trabajo:
const math = document.getElementById("maths"); for (let num = 1; num <= 12; num++) { const timeTable = document.createElement('div'); timeTable.classList.add('timetable'); for (let currentMath = 1; currentMath <= 12; currentMath++) { const child = document.createElement('p'); child.textContent = num + " x " + currentMath + " = " + (num * currentMath) timeTable.appendChild(child); } math.appendChild(timeTable); } <div id="maths"></div>El siguiente código debería funcionar. Sin embargo, no agregó ningún HTML, así que no estoy seguro de que funcione en su extremo, pero pruébelo ...
var math = document.getElementById("maths").innerHTML; var code = math; for (var num = 1; num <= 12; num++) { code += "<div class=\"timetable\">"; for (var currentMath = 1; currentMath <= 12; currentMath++) { code += "<p>" + num + " x " + currentMath + " = " + (num * currentMath) + " </p>"; } code += "</div>"; document.getElementById("maths").innerHTML += code; code = ""; } <div id="maths"></div>