Inhalt erzeugt durch Javascript Lasten außerhalb ihrer Elternschaft

Question

Ich versuche, eine Tabelle mit Inhalten via Javascript zu generieren, aber ich habe ein Problem, auch wenn ich versuche, es statisch zu tun, wie mit diesem sehr einfachen Beispiel:

  document.getElementById("gmaData").innerHTML+='<table border="1">' 
      document.getElementById("gmaData").innerHTML+='<tr>' 
      document.getElementById("gmaData").innerHTML+='<td>something</td>' 
      document.getElementById("gmaData").innerHTML+='</tr>' 
      document.getElementById("gmaData").innerHTML+='</table>' 

Aber wenn ich das Skript ausführen, wird der Inhalt der Tabelle außerhalb der Tabelle geladen wird, und die <tr> und <td> Tags werden nicht einmal gezeigt:

<div id="gmaData"> 
    <table border="1"></table> 
    something 
</div> 

ich habe keine Ahnung, was dieses verursachen könnte Error.

Answer 1

var genHTML = '<table border="1">'; 
genHTML+='<tr>'; 
genHTML+='<td>something</td>'; 
genHTML+='</tr>'; 
genHTML+='</table>'; 
document.getElementById("gmaData").innerHTML(genHTML); 

Sie können nicht Zeichenfolge Concat mit .innerHTML

Answer 2

Sie denken auf Markup, aber Browsern mit Objektbäume (DOM) verwenden.

Wenn Sie von innerHTML lesen, nimmt der Browser die DOM-Objekte innerhalb des Elements und serialisiert sie in HTML. Wenn Sie zu innerHTML zuweisen, analysiert der Browser den von Ihnen angegebenen HTML-Code und erstellt eine übereinstimmende DOM-Struktur, die alle gefundenen fehlerhaften Inhalte korrigiert. Die kurze Antwort lautet: Verwenden Sie nicht += auf innerHTML ohne einen wirklich, wirklich guten Grund. Es ist unnötig teuer (was normalerweise kein Problem ist), und noch wichtiger ist, dass alle Elemente in dem Element, auf dem Sie es ausführen, ihren Status verlieren (einschließlich Event-Handler). Und natürlich lässt der Browser Sie nicht die Öffnung eines Elements und dann das Ende davon später anhängen.

In Ihrem Fall müssen Sie den HTML-Code für die gesamte Tabelle auf einmal zuweisen:

document.getElementById("gmaData").innerHTML = // Or += if you're really appending 
    '<table border="1">' + 
    '<tr>' + 
    '<td>something</td>' + 
    '</tr>' + 
    '</table>'; 

Das bedeutet manchmal den HTML-Code in einem String-Variable den Aufbau und die dann, wenn Sie fertig zuweisen.