How to use "object HTMLTableElement"-CodePudding

I got a table on my site which I want to save in the session storage and replace it on button click (discard changes). Seems to work well to save it in session storage, but now I dont know how to make it usable for my HTML, that I can replace the current table with the table in my storage.

I hoped that I can store it like this: [ table output2 and just set it later on.

This is my current code.

    $(document).ready(function () {
        let table = document.querySelector('.overallTable');  
        sessionStorage.setItem('init', JSON.stringify(table));

        document.getElementById("dcChanges").addEventListener("click", function () {                                            
            if (sessionStorage.getItem('init') == sessionStorage.getItem('cache')) {console.log("equal")}
        });

        document.getElementById("saveInCache").addEventListener("click", function () {
            document.getElementsByClassName('overallTable');
            sessionStorage.setItem('cache', table);
            console.log(table);
            console.log("Output: Table: "   sessionStorage.getItem('cache'));
            console.log("Output: Converted: "   JSON.stringify(sessionStorage.getItem('cache')));
        });
      });

I hoped I just could do something like this document.getElementsByClassName("overallTable").innerHTML = sessionStorage.getItem('cache');

CodePudding user response：

You can use html() function of jQuery.

$('.overallTable').html();

CodePudding user response：

try document.getElementsByClassName('overallTable')[0].innerHTML