Wie verwende ich Javascript, um eine Tabelle zu erstellen?

Question

Ich weiß, dass dies auf verschiedene Arten behandelt wurde, aber mein Verständnis von Javascript ist immer noch sehr grundlegend und ich kann nicht verstehen, wie die Lösungen zu implementieren sind, die ich finde, also frage ich. Ich habe ein verstecktes Div. Ich möchte die Elemente aus einem Formular übernehmen und sie dann verwenden, um eine Kostenschätzungstabelle zu erstellen. Ich kann den Variablen in der Konsole folgen, also weiß ich, dass sie definiert sind und korrekt funktionieren. Hier ist, was ich habe:

<div class="results_box" id="control_box"> 
     <div id="invoice_box"> 

     </div> 
     </div>` 

und

unction displayResults(batting, delivery) { 
var box=document.getElementById("control_box"); 
var invoice=document.getElementById('invoice_box'); 
invoice.append('<table><tr><td>Quilt size in inches:</td><td> + size + </td></tr><tr><td>Cost per square inch:</td><td> + patCost + </td></tr><tr><td>Cost of batting:</td><td> + batting + </td></tr><tr><td>Shipping and handling:</td><td> + delivery +</td></tr><tr><td>Total Cost:</td><td></td></tr></table<button class="btn btn-info" type="submit" id="basic-submit">Contact me about this estimate</button>'); 
displayResults(box.style.display="block"); 

}

hier ist der Aufruf

displayResults(batting, delivery); 

Die meisten der Variablen sind global, aber die 2 sind lokal. Dies schlägt fehl, und ich bin mir sicher, dass Sie mir sagen können, warum, aber die Seite wird neu geladen und die Konsole wird zurückgesetzt, bevor ich die Fehlermeldung sehen kann, sodass ich nicht einmal sagen kann, was ich beheben soll. Jede Hilfe wäre willkommen.

Answer 1

Verwenden document.createElement('table') und hängen childNodes(tr th and td) und fügen textNodes zum td-Element (oder andere Elemente)