Restore the initial content of the div element

Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div.

$('#wrap').html(' <span id="t-image"> </span> <span id="t-info"> </span>');

By executing this code snippet, the contents within the wrap div will be replaced with 

<span id="t-image"> </span> <span id="t-info"> </span>
.

Is there a method to revert back to the original contents that were previously stored in the wrap div? Alternatively, are there any other techniques available that would allow for loading the previous contents later on?

javascriptjqueryhtmlcssdom

Answer №1

To keep track of the previous HTML content, you can store it within the data property of the element:

var $container = $("#container");
// Save current HTML
$container.data("previous_html", $container.html());
// Update HTML 
$container.html(' <div id="image"></div> <div id="info"></div>');
// Restore previous HTML
$container.html($container.data("previous_html"));

Answer №2

To insert additional text using jQuery, you can utilize the append() method.

 $("#container").append("<strong>Additional Text</strong>");

By doing this, the new content will be added after the current contents of the container.

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

Determine in a JSON array and add to an array object if the key is not found

I've got a JSON array like this: 0: {Id: "1", name: "Adam", Address: "123", userId: "i98"} 1: {Id: "2", name: "John", Address: "456"} The second object in the array doesn't have a userId key. How can I iterate through the array and add the ...

javascriptangularjs

The alignment feature in the center is malfunctioning

I'm currently utilizing jQuery Mobile and have the following HTML along with CSS: .ui-grid-a { padding: 0; margin: 0; margin-top: 15px; height: 380px; } .ui-block-a, .ui-block-b { padding: 0; margin: 0; height: 33.3%; } .ui-block-a a, .ui-block ...

jqueryhtmlcssjquery-mobile

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...

cssreactjsmaterial-ui

Express application failed to deploy due to boot timeout error R10

After researching extensively on Stack Overflow and various other websites, I have been unable to solve a problem with my small Express app using ES6 syntax. Upon deploying it to Heroku, I encountered the following error: LOGS : 2021-04-09T12:14:14.688546 ...

javascriptnode.jsexpressheroku

AngularJS ng-focus does not function properly with iframes

Why isn't ng-focus working with iframe in AngularJS? What am I missing? Take a look at my code: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <iframe src="example.com" tabindex="-1" ng-fo ...

javascriptangularjsiframefocuslistener

What's the importance of including (req, res, next) in the bodyParser function within Express?

My original use of bodyParser looked like this: app.use(bodyParser.json()); However, I now have a need to conditionally use bodyParser: app.use((req, res, next) => { if (req.originalUrl === '/hooks') { next(); } else { ...

javascriptnode.jsexpressbody-parser

Get an MP4 on your iPhone (iOS) by downloading it from a link on a webpage

Despite trying various methods such as the HTML5 download tag, JavaScript, JQuery, and other techniques, I have not been able to successfully download a file to the Album. While photos can be saved by long clicking and selecting "Save Image", videos do n ...

javascriptjqueryiosiphonemp4

Tips on eliminating duplicate rows within the <tr> tag

Is there a way to remove duplicate rows in a table generated dynamically and only keep the first two unique rows within <tr> elements? I'm looking for a solution similar to the one discussed in this thread <table id="test"> <tr> < ...

jquery

Is it feasible to activate a Bootstrap Tooltip from a different element?

I am currently developing a system that enables users to add notes over an image they upload. Presently, I have a note div that, upon clicking, opens a text box for editing. When hovering over this div, I utilize Bootstrap Tooltip to preview the contents o ...

javascriptjquerytwitter-bootstraptooltip

Why is my jQuery remove() function not working on a div?

Hey there, I'm having trouble removing a div using jQuery. I've written some code but it's not working as expected. Can someone help me figure out what's going wrong? var img_old=$(".colCenter").find('#div_'+old_id); img_old. ...

jquery

The removal of the Lodash library from node modules is not occurring

In an effort to reduce bundle size, I made the decision to replace all lodash methods with core js methods in my Vuejs project. Despite attempting various npm uninstall commands such as: npm uninstall lodash npm uninstall lodash --save npm uninstall lodas ...

javascriptnode.jsvue.jswebpacklodash

"By simply pressing the back button, Material UI Table effortlessly expands the row limit to accommodate

After creating a Material UI table and implementing Pagination, I noticed that the row limit increases automatically when clicking the back button. Even after consulting the Material UI docs, it seems like others are facing the same issue. Can anyone provi ...

javascriptreactjsmaterial-ui

A guide on obtaining the pixel dimensions of a ThreeJS mesh object: determining its visible width and height

I am currently grappling with the task of determining the visible view width and height of a ThreeJS mesh object in pixel units. In the image provided below, you can observe objects suspended in 3D space. Upon clicking the mouse, I need to be able to disc ...

javascriptthree.js

Ways to Close a Modal in Ionic 5

I have a scenario where I need to open a modal, perform an asynchronous action, and then automatically dismiss the modal once the action is completed. Specifically, I want to use the fetchData function to handle the async task. @Component({ }) export cla ...

javascriptangulartypescriptionic-framework

What is the best way to manage returning to the original page that was loaded when utilizing the History API?

I'm in a bit of a pickle here. I've been using History.js with the History API and everything was going smoothly until I encountered an issue. Let's start with a simple page setup like this: <div ="header"> Header </div> <d ...

javascriptajaxapihistory.js

Implement pagination once the amount of data surpasses the specified threshold

I'm looking to implement pagination once the displayed data exceeds a certain limit. Currently, I have set it up so that only 6 items are shown at a time. What I want is to add pagination below the table to display the remaining data. How can I achiev ...

htmlangularjspaginationstrongloopapic

Tips on how to achieve a 50% width within a bootstrap input group

Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...

cssbootstrap-5

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue. Is this a good approach or could it potential ...

javascriptvue.jsvuex

Show the user's input within a clickable button

I'm trying to create a functionality where I have an input field and a button next to it. When I type something in the input field and click on the button, I want the result to be displayed in another button. Here is what I have attempted so far: f ...

javascripthtmlcss

Can you explain how to retrieve the header value from ng-table?

Is there a way to retrieve the table header for each column from JavaScript? When I call tableTest, it only returns data of each row, not the header names like 'name' and 'description'. Is there a method like tableTest.data-title to acc ...

javascriptangularjs