Updating entire DOM in javascript

Implementing undo-redo functionality in my project has proven to be quite complex, as every change affects numerous elements. I believe that saving and restoring the entire page may be the most effective solution. However, I have encountered issues with missing .data() parameters of DOM elements. The functions I am using are:

// save
var documentCopy = document.documentElement.cloneNode(true);

// restore
document.replaceChild(
documentCopy,
document.documentElement
);

How can I save and restore the entire DOM while retaining jQuery.data() of elements?

javascriptdomreplaceundo

Answer №1

If you're looking for a solution, consider using jQuery's clone method instead. Make sure to use it with two true parameters, although be cautious as it may result in slower performance. Have you explored other options aside from this? Perhaps replacing a smaller section of the document could yield better results?

It's important to note that document.documentElement doesn't seem to play well with this approach, and using it with the document's body can result in loss of data from the original elements (surprising right?). Check out this test example to see how it works.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Browser local storage protection

Utilizing local storage to preserve specific data for my website has been beneficial. Each necessary object is stored so that users can access them on their browser (in chrome: Resource -> Local Storage). My objective now is to make these objects unrea ...

javascriptjquerybackbone.jslocal-storage

Changing the Material UI imported Icon on click - a step-by-step guide

Hey there, I'm currently working with React JS and Redux. I have a challenge where I need to change the star outline icon to a filled star icon on click. The icon is located just after emailRow in the emailRow__options section. Can someone assist me w ...

javascriptreactjsreduxmaterial-ui

How can you eliminate the first elements of two or more arrays of objects until all of their first elements match based on a specific field?

My Typescript code includes a Map object called `stat_map` defined as const stat_map: Map<string, IMonthlyStat[]> = new Map(); The interface IMonthlyStat is structured as shown below (Note that there are more fields in reality) export interface IMon ...

javascripttypescriptalgorithm

Guide for invoking a servlet via a navigation bar hyperlink and implementing a jQuery feature for smooth scrolling upon clicking

Is there a way to call a servlet from a navigation bar href link and at the same time trigger a jQuery function for smooth scrolling down? I attempted to call the servlet using an onclick href link, it successfully calls the servlet but does not trigger t ...

javascriptjavajquery

What is the best way to skip certain steps within a Promise using Bluebird?

Here is an example of some code: Queues.findOne({_id: id}) .then(function(q) { var status = q.status; //... }).then(function(q) { // A }).then(function(q) { // B }).then(function(q) { // C }).then(function(q) { // D }).then(function(q) { // E }).then ...

javascriptnode.jspromisebluebird

Unable to transfer AJAX data to PHP script

Trying to figure out how to send AJAX data to PHP. While I am comfortable with PHP, JavaScript is a bit new to me. Incorporating HTML / JavaScript <input type="text" id="commodity_code"><button id="button"> = </button> <script id="s ...

javascriptphpjquerymysqlajax

DataGrid React MUI: Aligning Column Data and Header for "Number" Type

In my React project, I am using MUI. I noticed that when I specify the type of a column as type: "number", both the column header and data align to the right. This issue can be replicated in a simple example taken from the MUI documentation: code ...

javascriptreactjsmaterial-uidatagridmui-x-data-grid

The Ajax success callback unexpectedly displays the number "1" in the top left corner of the empty page instead of updating the specified div

Currently, I am in the process of developing a Yii2 application. I have encountered an issue where I select data from a Bootstrap modal popup and submit it to a controller action that contains an insert query. The problem arises after submitting the data f ...

javascriptjqueryyii

What is the best way to display a unique modal on every tab?

I'm facing an issue where I am attempting to trigger a modal on each tab item, however the modal only opens on the initial tab. Clicking on any other item results in the modal opening on the first tab instead. Additionally, when I add new items, I am ...

javascriptvue.jsvuejs2tabsmodal-dialog

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

Learn how to display specific text corresponding to a selected letter from the alphabet using Vanilla JavaScript

I am extracting text from a JSON file. My goal is to enable users to click on a specific letter and have the corresponding text displayed. For example, if someone clicks on 'A', I want to show the text associated with 'A'. An example of ...

javascripthtmlarraysjsonobject

The state update does not seem to be affecting the DOM

I've implemented this component in my React app. It updates the state every second, but oddly enough the value <p>{this.state.time}</p> is not changing as expected. When I print the state value, it does change every second. import React f ...

javascriptreactjs

Error message: "An issue occurred with the Bootstrap Modal in

I've designed an AngularJS app like so: <!DOCTYPE html> <html ng-app="StudentProgram"> <head> <title>Manage Student Programs</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

tips on utilizing the JSON information transmitted from the backend

$.ajax({ url: '{{ URL('reports/groupsUsersGet') }}', dataType: "json", data: { group_id : $('#group').val(), }, success: function(data) { <li>"i need to insert variable here"</li> }, error: function (data) ...

javascriptjqueryjsonlaravellaravel-5

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Tips for Retrieving Data from a Multi-Dimensional Array

I need help accessing the values in my array and assigning them to variables for later use. I have created an array and used the randomGo() function to generate a random number that corresponds to a pair of numbers within the array. My goal is to assign ...

javascriptarrays

Testing infinite scrolling with the help of protractor

It seems like the infinite scrolling feature in ng-grid is not exactly infinite, but it's the closest comparison I could come up with for what I am observing. In our application, we are using ng-grid to display data in a table with approximately 170 ...

javascriptangularjsprotractorng-grid

Transforming an unordered list to function similarly to a select input

I am looking to style a ul list to function as a select form element. I have successfully populated a hidden input using my code. Now, I am trying to make the ul behave like a select input when either the keyboard or mouse is used. Previously, I had some ...

javascriptjqueryhtml

What is the best way to remove top divs without causing the bottom divs to shift upwards?

I am faced with a scenario where I must remove the topmost divs in a document without altering the user's view. Essentially, I need to transition from: ---------start of document div1 div2 div3 ---------start of window div4 div5 ------- ...

javascriptjqueryhtml

How can I change the nested Material UI component style from its parent component?

I am currently incorporating a component from an external library into my project. However, I am facing limitations in customizing its style, especially when it comes to a button that is using material ui styles. Upon inspecting the element, I can see that ...

javascriptreactjsmaterial-uijss