DOM. Отрисовка после обновления страницы?

Question

[Валентин Попов]

Подскажите как правильно отрисовать DOM элементы.
У меня есть два блока. В одном блоке (левый) есть заголовок и кнопка "Добавить". Во втором блоке (правый) мне необходимо отрисовать эти заголовки по клику на кнопку "Добавить" в правом блоке.

<div class="left">
  <p>Заголовок</p>
 <button>Добавить</button>
</div>

<div class="right">
  //отрисовать элементы заголовков левого блока по клику на кнопку "Добавить"
</div>

В js коде я создаю функуцию и вызываю эту функцию по клику на кнопке.

function addToContent(){
    //в этой функции я создаю DOM элементы заголовка, которые будут отображаться при клике на кнопку "Добавить"
   let elem = '<h2>' + id + '</h2>'; // просто наглядный пример
   let rightBlock.innerHTML = elem;
}

let btnAdd = document.querySelector('button');
btnAdd.addEventListener('click', addToContent);

У меня при клике на кнопку все отображается в моем правом блоке, но когда я обнавлю страницу браузера, то все пропадает и только отображается когда опять кликну на кнопку ДОБАВИТЬ.
Как мне сделать, что бы данные добавленные при клике на кнопку отображались даже когда обновлю страницу? Искал информацию и толком ничего не нашел или не понимаю как это реализовать. Покажите наглядно примером если можно.

Answer 1

[Andrew]

у меня все сохраняется в localStorage, но при обновлении страницы dom не отрисовывается , он только отрисовывается при нажатии на кнопку "Добавить", а я хотел бы разобраться/научиться, как отображать это DOM дерево после обновления страницы.

let id = localStorage.getItem("id")!==null?checkAndGo:0;

function checkAndGo() {
  let maId = localStorage.getItem("id");
if(maId>0){
  for(let i = 0;i<id;i++){
    let elem = `<h2> ${i+1} </h2>`;
    let rightBlock = document.querySelector('.right');
    rightBlock.innerHTML += elem;
  }
}
}

Суть в том, чтобы при открытии страницы каждый раз проверять чему равно значение блоков и если оно 0++, заполнить тем кол-вом контейнеров, которым нужно.
Но я бы сделал отдельную функцию на создание блоков(получая кол-во) и отдельную на отрисовку, которая бы запускала функцию создания/удаления,изменения из себя, в зависимости от нужды.

Comments

[Валентин Попов]

Супер. Помогло. Спасибо огромное!

Answer 2

[Айнур Валиев]

trigger

Comments

[Валентин Попов]

что значит trigger? поясните пожалуйста?

[Айнур Валиев]

в jquery есть такая функция.

[Andrew]

Айнур Валиев, вы вопрос читали?)

[Айнур Валиев]

Andrew, вопрос странный - зачем отрисовывать то, что должно появляться при клике? тогда сохраняй в куках нажатие, и делай проверку.
я тебе дал только наводку.

[Andrew]

Айнур Валиев, не мне.
Ну так вопрос был не в том, как повесить обработчик, а как сохранить в эти самые куки(зачем?это уже другой вопрос). Или вы отвечаете на свои вопросы?
Странная наводка, пальцем в небо.

[Валентин Попов]

Айнур Валиев, jquery не использую, только чистый js

[Валентин Попов]

Айнур Валиев, у меня все сохраняется в localStorage, но при обновлении страницы dom не отрисовывается , он только отрисовывается при нажатии на кнопку "Добавить", а я хотел бы разобраться/научиться, как отображать это DOM дерево после обновления страницы.