尝试使用 JS 更新段落元素，但它会创建一个新页面答案

【问题标题】：Trying to update a paragraph element with JS but it creates a new page尝试使用 JS 更新段落元素，但它会创建一个新页面
【发布时间】：2015-10-04 02:43:37
【问题描述】：

我有一个收集数据并将其放入数组的表单

所以我正在尝试创建一个页面，一旦按下按钮，它就会运行此功能，我希望它显示在我已分配 ID 的段落中的表单下方，以便可以添加更多数据。

但是，当我运行页面时，它会在新页面中显示表格并删除表单。关于如何让它在表单下方显示表格的任何想法？

电话来了……

document.getElementById("appTable").innerHTML = showAppointments(appointmentArr);

这里是函数...

function showAppointments(appointmentArr){ //Function to display all data in a table
        var splitAppointment = new Array();         
        for(var i=0; i <= appointmentArr.length; i++){
            if(i==0){ //Draw intitial table only once
                document.writeln('<table border="1">');
                document.writeln("<tr>");
                document.writeln("<th>Priority</th>");
                document.writeln("<th>Date</th>");
                document.writeln("<th>Start</th>");
                document.writeln("<th>End</th>");
                document.writeln("<th>Subject</th>");
                document.writeln("<th>Venue</th>");
                document.writeln("</tr>");
            }else{
                splitAppointment = appointmentArr[i-1].split(';'); //Split the main array by ";" into a seperate array to be read at current index
                document.writeln("<tr>");
                for(var j=0; j < splitAppointment.length; j++){ //Display each row of data in the table for single appointment details 
                    document.writeln("<td>"+splitAppointment[j]+"</td>");
                }
            document.writeln("</tr>");  
            }
        }
        document.writeln("</table>");
    }

提前致谢。

【问题讨论】：

标签： javascript html innerhtml

【解决方案1】：

您需要创建元素并将它们添加到 DOM，而不是使用 document.writeln，如下所示：

var table = document.createElement("table");
table.setAttribute("border","1");
document.body.appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
var th = document.createElement("th");
tr.appendChild(th);

【讨论】：

我是把它放到函数还是 html 中？

【解决方案2】：

我用不同的方式修复了它。

我将所有信息写入一个变量，然后使用 innerHTML 输出该变量，它在同一页面上正确地写入了表格的所有数据。

例如。

表 += '' ...

等等

【讨论】：