When the page is updated, the entire `.append ()` disappears

Since you have jQuery, the code will be smaller. I agree with the comment about localStorage or DB, but I did not see the answer, so I’ll show the idea with localStorage , in my opinion this approach is simpler. Complement the click method:

 $('#button').on('click', function(){ const element = '<p>test</p>'; // положили в переменную наш элемент $('body').append(element); // дабавили к body наш элемент const items = localStorage.getItem('appended'); // получили по ключу свой элемент var elements = JSON.parse(items) || []; // распарсили полученный элемент elements.push(element); // добавили в массив localStorage.setItem('appended', JSON.stringify(elements)); // записали новое значение }); 

And also add a block of code that will add elements after the page has refreshed:

 $(document).ready(function() { const items = localStorage.getItem('appended'); // получили по ключу свой элемент var elements = JSON.parse(items) || []; // распарсили полученный элемент // пройдем по элементам и добавим их к body for (var index = 0; index < elements.length; index++) { $('body').append(elements[index]); // дабавили к body наш элемент } }); 

Useful links:

• Window.localStorage
• Storage.setItem ()
• Storage.getItem ()
• Storage.removeItem ()
• JSON.stringify ()
• JSON.parse ()

Use cookies

Static solution: Initially hide this block for the time being, and then show it on click? In the client's cookies, it is necessary to register that this block is already visible and show it immediately upon repeated display.

Dynamic solution: In the form in which this is done, you can use cookies to save which blocks are shown, and which are hidden, and when you refresh the page, after reading the cookie, you can dynamically add / delete the corresponding blocks.