сохранить подмножество dom для дальнейшего использования, сохранить список событий и введенные значения

Кнопка должна переключаться между формами. Поэтому, когда я нажимаю его, я хочу СОХРАНИТЬ СОСТОЯНИЕ формы1 (я хочу сохранить прикрепленные списки событий, а также тексты, которые пользователь вводил в полях ввода)

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

Осторожно : НЕ используйте это на производстве. Это не рекомендуется. Используйте простые элементы UI / UX, чтобы показать / скрыть части вашей страницы посредством CSS и / или Javascript. Пример ниже предназначен исключительно для демонстрации того, как все работает.

Храните ссылки на ваши формы в переменных. Используйте appendChild, чтобы добавить их в свой контейнер. Перепишите innerHTML, чтобы удалить элемент из контейнера, и снова используйте appendChild, чтобы поменять местами с другой переменной. Все обработчики событий и состояния входных элементов будут сохранены как есть, поскольку переменная является ссылкой.

Пример: ( Введите различные значения во входах, чтобы увидеть состояние при переключении. )

var forms = [], 
    btn = document.getElementById('btn'), 
    display = document.getElementById('display'), 
    result = document.getElementById('result'), 
    currentForm = 0;
;

start();

function start() {
  btn.addEventListener('click', switcher);
  forms[0] = createForm(0);
  forms[1] = createForm(1);
  display.appendChild(forms[0]);
}

function switcher() { 
  display.innerHTML = '';
  if (currentForm === 0) {
    display.appendChild(forms[++currentForm]);
  } else {
    display.appendChild(forms[--currentForm]);
  }
}

function createForm(idx) { 
  var frm, inp, lbl;
  frm = document.createElement('form');
  inp = document.createElement('input');
  inp.addEventListener('input', show);
  lbl = document.createElement('label');
  lbl.textContent = "Form # " + (idx + 1) + ": ";
  frm.appendChild(lbl);
  frm.appendChild(inp);
  return frm;
}

function show(e) { result.textContent = e.target.value; }

<button id="btn">Switch</button>
<hr>
<div id="display"></div>
<hr>
<span>Keeping typing in the input above: </span><span id="result"></span>

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