How to create an html element and make it stay in the DOM even after reloading the page?

Question

I'm making a website that contains an html form. I coded in JavaScript that when the form is filled and when the button "Publier" is clicked, it creates a table with the information filled in the form. It works, but, when I reload the page, the tables disappear. How can I make the tables stay on the page even after reloading it ?

Here are my html and JavaScript codes :

let button = document.querySelector('button[type="button"]');

button.addEventListener("click", () => {

  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;


  if (nom !== "" && adresse !== "" && capacite !== "" && phone !== "" && heure1 !== "" && heure2 !== "") {
    console.log("");
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');

    document.querySelector('body').appendChild(table);

    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);


    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);

    alert("Formulaire envoyé !")
  }

});

<div id="party">
  <h1>Publication</h1>
  <div>
    <label for="nom">Nom de la pool party :</label>
    <input type="text" id="nom" name="nom" placeholder="nom de la pool party" required>
  </div>
  <div>
    <label for="adresse">Adresse de la pool party :</label>
    <input type="text" id="adresse" name="adresse" placeholder="adresse de la pool party" required>
  </div>
  <div>
    <label for="capacite">Capacité d'acceuil :</label>
    <input type="text" id="capacite" name="capacite" placeholder="capacité d'acceuil de la pool party" required>
  </div>
  <div>
    <label for="phone">Numéro de téléphone (facultatif) :</label>
    <input type="text" id="phone" name="phone" placeholder="numéro de téléphone" required>
  </div>
  <div>
    <label for="heure1">Heure de début :</label>
    <input type="text" id="heure1" name="heure1" placeholder="10h15" required>
  </div>
  <div>
    <label for="heure2">Heure de fin :</label>
    <input type="text" id="heure2" name="heure2" placeholder="20h15" required>
  </div>
  <button type="button">Publier</button>
</div>

Answer 1

I won't lie it was fiddly to get this to work but here it is...

let button = document.querySelector('button[type="button"]');
const storageKey = "local_v3.7"

button.addEventListener("click", () => {
  event.preventDefault()
  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;

  if (nom !== "" && adresse !== "" &&
    capacite !== "" && phone !== "" &&
    heure1 !== "" && heure2 !== "") {
    let btn = document.createElement('btn');
    let party = document.createElement('party');
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');
    const ref = document.getElementById("res");

    ref.insertBefore(table, ref.children[0]);

    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);

    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);
    let tables = ''

    document.querySelectorAll('table')
      .forEach(function myFunction(item, index, arr) {
        tables += item.outerHTML;
        return item.outerHTML;
      })
    localStorage.setItem(storageKey, tables);
    alert("Formulaire envoyé !")
  }
});
var support = (function() {
  if (!window.DOMParser) return false;
  var parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch (err) {
    return false;
  }
  return true;
})();
var stringToHTML = function(str) {
  // If DOMParser is supported, use it
  if (support) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  }
  // Otherwise, fallback to old-school method
  var dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};

$(function() {
  if (localStorage.getItem(storageKey) !== null) {
    var str = localStorage.getItem(storageKey)
    var doc = stringToHTML(str)
    var tbls = Array.from(doc.children)
    for (var count = 0; count < tbls.length; count++) {
      //console.log(count + ': ' + tbls[count].innerHTML);
      document.getElementById('res').appendChild(tbls[count]);
    }
  }
});

https://jsfiddle.net/t7sce9gx/38/

Please not your need this bit of additional HTML to hold the tables

<div id="res">
</div>

I hope this helps...

Answer 2

so like this then: https://jsfiddle.net/o3Ldx1z7/14/

let button = document.querySelector('button[type="button"]');
const storageKey = "local_v3.1"

button.addEventListener("click", () => {
  event.preventDefault()
  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;

  if (nom !== "" && adresse !== "" &&
    capacite !== "" && phone !== "" &&
    heure1 !== "" && heure2 !== "") {

    let btn = document.createElement('btn');
    let party = document.createElement('party');
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');
    document.querySelector('body').appendChild(table);
    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);

    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);
    let tables = ''

    document.querySelectorAll('table')
      .forEach(function myFunction(item, index, arr) {
        tables += item.outerHTML;
        return item.outerHTML;
      })
    localStorage.setItem(storageKey, tables);
    alert("Formulaire envoyé !")
  }
});
var support = (function() {
  if (!window.DOMParser) return false;
  var parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch (err) {
    return false;
  }
  return true;
})();
var stringToHTML = function(str) {
  // If DOMParser is supported, use it
  if (support) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  }
  // Otherwise, fallback to old-school method
  var dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};

$(function() {
  if (localStorage.getItem(storageKey) !== null) {
    var str = localStorage.getItem(storageKey)
    var doc = stringToHTML(str)
    document.querySelector('body').appendChild(doc);
  }
});

Answer 3

This will allow you to add rows, refresh and still have the same table and rows and be able to add even more rows after that and still have them show upon another reload: https://jsfiddle.net/dp8uLez5/11/

let button = document.querySelector('button[type="button"]');
const storageKey = "local_v2"

button.addEventListener("click", () => {
  event.preventDefault()
  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;

  if (nom !== "" && adresse !== "" &&
    capacite !== "" && phone !== "" &&
    heure1 !== "" && heure2 !== "") {

    let btn = document.createElement('btn');
    let party = document.createElement('party');
    btn.style.display = "block";
    party.style.display = "none"
    let table = makeTable((document.querySelector('table') === null));

    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);

    let rows = (localStorage.getItem(storageKey) || '') + '¬' + row_2.innerHTML
    localStorage.setItem(storageKey, rows);
    alert("Formulaire envoyé !")
  }
});


function makeTable(isfirstTime) {
  let table = null;
  if (isfirstTime) {
    table = document.createElement('table');
    document.querySelector('body').appendChild(table);
    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);

  } else {
    table = document.querySelector('table');
  }
  return table;
}


$(function() {
  if (localStorage.getItem(storageKey) !== null) {
    let table = makeTable(true);
    var str = localStorage.getItem(storageKey)
    for (var i = 0; i < str.split('¬').length; i++) {
      if ((str.split('¬')[i] !== '')) {
        let arow = document.createElement('tr')
        arow.innerHTML = str.split('¬')[i]
        table.appendChild(arow);
      }
    }
  }
});

I hope this helps

Answer 4

As AlekseyVY states, local storage is the way to go, see an example here using your code above:

https://jsfiddle.net/2g8nd7hy/2/

let button = document.querySelector('button[type="button"]');
const storageKey = "local"
button.addEventListener("click", () => {
    event.preventDefault()
  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;

  if (nom !== "" && adresse !== "" &&
    capacite !== "" && phone !== "" &&
    heure1 !== "" && heure2 !== "") {
    let btn = document.createElement('btn');
    let party = document.createElement('party');
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');

    document.querySelector('body').appendChild(table);

    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);


    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);
    localStorage.setItem(storageKey,
      document.getElementsByTagName('table')[0].outerHTML.toString())
    alert("Formulaire envoyé !")
  }

});
var support = (function() {
  if (!window.DOMParser) return false;
  var parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch (err) {
    return false;
  }
  return true;
})();
var stringToHTML = function(str) {
  // If DOMParser is supported, use it
  if (support) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  }
  // Otherwise, fallback to old-school method
  var dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};
$(function() {
  if (localStorage.getItem(storageKey) !== null) {
    var str = localStorage.getItem(storageKey)
    var doc = stringToHTML(str)
    document.querySelector('body').appendChild(doc);
  }
});

Hope this helps

Answer 5

You can use localstorage, to store form inputs and retrieve it on page load. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 6

Add the event.preventDefault() to your .addEventListener("click", function(event){