Problem z pętlą w JS

Question

Witam,

document.getElementById("p7").innerHTML += "<table>";
    for(var x = 0; x < 2; x++){        
        document.getElementById("p7").innerHTML += "<td></td>";
        
        document.getElementById("p7").innerHTML += "aaaa";
    }
    document.getElementById("p7").innerHTML += "</table>";

No więc pętla się wykonuje. Co ciekawe efekt wygląda tak:

<p id="p7"><table></table>aaaaaaaa</p>

Popełniam głupi błąd którego nie widzę? 

Answer 1

Prawdopodobnie przeglądarka po prostu poprawiła stworzony przez Ciebie kod. HTML przekazany do innerHTML jest "naprawiany" przez przeglądarki, stąd też najpierw się składa cały string, a dopiero później próbuje go wstawić do elementu.

Inna rzecz, że Ty próbowałeś wsadzić tekst bezpośrednio do table, z pominięciem tr i td. Stąd przeglądarka usunęła wadliwy kod.

Comments

Moim skromnym zdaniem poniższy kod jest poprawny: 

    document.getElementById("p7").innerHTML += "<table><tbody><tr>";
    for(var x = 0; x < 2; x++){        
        document.getElementById("p7").innerHTML += "<td>aaaa</td>";
    }
    document.getElementById("p7").innerHTML += "</tr></tbody></table>";

Da się pominąć ingerencję przeglądarki? 

---

Nie jest. Z prostej przyczyny: w chwili, gdy doklejasz coś do elem.innerHTML, przeglądarka musi przebudować drzewko DOM danego elementu. Jeśli w tym momencie dostanie jedynie fragment kodu, to nie będzie w stanie zbudować poprawnego drzewka DOM. Stąd musi dostać cały kod HTML:

var html = '<table>';

for ( var i = 0 ; i < 10; ++i ) {
    html += '<tr><td>' + ( i + 1 ) + '</td></tr>';
}

html += '</table>';

elem.innerHTML = html;

 

Answer 2

1. Tabela zawiera wiersze (<tr>), a w nich komórki (<td>), Ty zapisujesz jedynie komórki, a do tego tekst znajduję się poza nimi...,także nie ma to prawa działać jak powinno.

2. Kolejną rzeczą jest to, że istnieją specjalne polecenia dla tabel.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

Comments

<p id="p7"><table><tbody><tr></tr></tbody></table>aaaaaaaa</p>

Efekt Twojej pętli 

---

Z pośpiechu tak wyszło, ponieważ wcześniej nie wpadłem na pomysł by obsługiwać tabelę w taki sposób, natomiast już się poprawiam:
 

var tableContent = "";
for(var x = 0; x < 2; x++){        
        tableContent += "<td>aaaa</td>";
   }
document.getElementById("p7").innerHTML += "<table><tr>" + tableContent + "</tr></table>";