Здравствуйте, ребята, есть ли способ сохранить часть (поддерево) DOM для дальнейшего использования?
Я хочу добиться следующего:
Я создаю две формы с чистым JavaScript.
form1 = document.createElement('form1');
input = document.createElement('input');
input.addEventListener(Listener);
form1.appendChild('input');
....
Формы строятся одинаково.
Где-то у меня есть div на моей странице, где я могу добавить appendChild ('form 1');
Предположим, у меня также есть кнопка на моей странице. Кнопка должна переключаться между формами. Поэтому, когда я нажимаю его, я хочу сохранить СОСТОЯНИЕ формы1 (я хочу сохранить прикрепленные списки событий, а также тексты, введенные пользователем в поля ввода), например, в переменной и удалить (отсоединить) после формы1 из DOM и связать форму2.
Я знаю, что это можно решить с помощью css и переключать формы, делая одну скрытую, а другую видимой, но на самом деле я заинтересован в сохранении поддерева DOM в качестве снимка.
Я надеюсь, вы понимаете мой вопрос, так как английский не мой родной язык.
Заранее спасибо.
2 ответа
Кнопка должна переключаться между формами. Поэтому, когда я нажимаю его, я хочу СОХРАНИТЬ СОСТОЯНИЕ формы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>
Как упоминалось ранее, используйте фрагмент документа для хранения фрагментов, которые вы можете обратитесь позже.
Если я правильно понимаю ваш вопрос, Document.createDocumentFragment () не слишком подходит для вашего случая, потому что вам нужно сохранить изменения после того, как фрагментированный фрагмент документа будет вставлен в средство визуализации (в DOM «реальной» страницы)? Если это так, то вы можете попробовать использовать экспериментальные createHTMLDocument () и сохраните его где-нибудь (например, в localStorage), что даст вам возможность синхронизировать оба документа - ваш «настоящий» и его копию. Но на самом деле этот вопрос включает также избегание лишних перерисовок / перекомпоновки и т. Д., Так что это хороший момент, чтобы погрузиться в документацию;)
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.