Попытки обновить пункт элемент с JS, но он создает новую страницу

Question

У меня есть форма, которая собирает данные и помещает его в массив

Так что я пытаюсь создать страницу, которая когда кнопка нажата его запускает эту функцию, и я хочу, чтобы она отображалась под формой в абзаце, который я присвоил идентификатору, чтобы добавить больше данных.

Однако, когда я запустил страницу, она отображает таблицу на новой странице и удаляет форму. Любые идеи о том, как его отображать, отображают таблицу под формой?

Вот вызов ...

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>"); 
    }  

Спасибо заранее.

Answer 1

Вместо использования document.writeln, необходимо создать элементы и добавить их в DOM, например, так:

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); 

Answer 2

Я установил его, используя другой способ.

Я записал всю информацию в переменную, а затем вывел переменную с помощью innerHTML, и он правильно написал все данные для таблицы на одной странице.

например.

стол + = '' ...

и так далее