I am wondering how to retrieve the orignial source code of a div if I've used
Sorry! But your question is not clear to me!provide some code to deal with.
"It will never rain roses: when we want to have more roses, we must plant more roses."
If I change the html of a div, and then I want to revert it back to the original html in the div, how do I do that?
Originally Posted by
droidus
If I change the html of a div, and then I want to revert it back to the original html in the div, how do I do that?
Store the original before you change it.
Originally Posted by
svidgen
Store the original before you change it.
here's an example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:13px;background-color:#fff;color:#000;padding-top:100px;}
a:link,a:active,a:visited{color:#000;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
a:hover{color:Crimson;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
#dyn{margin:30px}
#content{color:Crimson;font-weight:bold;}
.inl{display:inline-block;margin-left:10px;margin-right:10px;}
.inl b{color:#777;font-size:11px;}
</style>
<script type="text/javascript">
var storage=[];
function showHtml(){
$('#content').val($('#dyn').html());
if(storage.length==0){$('#what_is_stored').html('nothing is stored yet');}
else{
var str='';
for(var i=0;i<storage.length;i++){str+='<span style="color:Salmon">'+storage[i]+'</span> <a href="#null" onclick="restoreHtml('+i+')">Restore this</a><br />';}
$('#what_is_stored').html(str);
}
}
function changeHtml(){
if($('#newcontent').val()!=''){
if(storage.length==0){storage.push($('#dyn').html());}
$('#dyn').html($('#newcontent').val());
storage.push($('#dyn').html());
showHtml();
}
}
function restoreHtml(){
var n=(typeof(restoreHtml.arguments[0])=='undefined')? 0 : restoreHtml.arguments[0];
$('#dyn').html(storage[n]);
showHtml();
}
$(document).ready(function(){
showHtml();
});
</script>
</head>
<body>
<div id="dyn"><b>this</b> <span>is</span> <i>the target div</i> <u>having <s>various html</s> in it</u></div>
<div class="inl"><textarea id="content" readonly="readonly" cols="50" rows="5"></textarea><br /><br /><b>Here we can see inner html of the target div</b></div>
<div class="inl"><textarea id="newcontent" cols="50" rows="5"></textarea><br /><br /><b>Here we can input new html and <a href="#null" onclick="changeHtml()">Change</a> the target div or <a href="#null" onclick="restoreHtml()">Restore</a> it</b></div>
<br /><br />
<div><b>Here we can see the stored html's</b><br /><br /><div id="what_is_stored"></div></div>
</body>
</html>
use [code]YOUR CODE GOES HERE or burn in Hell
Is it better to just fade out the div, and then show a new div, instead of overwriting the main div?
That works too. When you "store" the old info, it doesn't necessarily have to be the innerHTML. You can store the entire node, which will maintain any dynamically added javascript hooks, and just replace the node in the DOM with a new one.http://www.w3schools.com/jsref/met_n...placechild.asp ... or some jqueryish fade if you prefer.
Thread Information
Users Browsing this Thread
There are currently 2 users browsing this thread. (0 members and 2 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
div html revert
Reply With Quote
Originally Posted by droidus
Bookmarks